css实现单行多行文本超出隐藏显示省略号代码
代码语言:html
所属分类:布局界面
代码描述:css实现单行多行文本超出隐藏显示省略号代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css" media="all"> body{ background: white; padding: 50px; } #single { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #mutirow { width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } #mutirow2 { position: relative; line-height: 20px; max-height: 100px; overflow: hidden; } #mutirow2::after { content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0