text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; word-break: break-all; font-size: 0.9rem; height: 2.5rem; } 文本截断效果如图: 注意: font-size: 0.9rem; height: 2.5rem; overflow : hidden; 非常重要,否则在微信...
div{overflow:hidden;text-overflow:ellipsis;height:60px;display:-webkit-box;-webkit-line-clamp:3;/*可指定任一行显示...效果*/-webkit-box-orient:vertical;/*此时不需要white-space:nowrap;*/} 看到新增的属性,应该就知道,他不是通用的,只针对webkit内核浏览器,而对于最TM神奇的IE浏览器,只能使用插件了,...
1、text-overflow语法: text-overflow : clip | ellipsis 2、text-overflow参数说明: clip: 不显示省略标记(...),而是简单的裁切 elipsis: 当对象内文本溢出时显示省略标记(...) 3、简单使用: <!doctype html>测试页面.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}<ulid="t...
设置固定高度,超出的数据部分变成列表可滚动 width: 100%; height: 100px; overflow: auto; //出现滚动条; 单行文字不换行,溢出的部分显示省略号 white-space: nowrap; /* 防止换行 */ overflow: hidden; /* 隐藏超出部分的文本 */ text-overflow: ellipsis; /* 超出文本显示为省略号 */ 首行缩进, 建议...
2. Automatically hide the ellipsis Now there is still a problem, how to hide the ellipsis when there is less text? You can try "CSS blindfold" Simply put, it is to cover the ellipsis with a large enough color block. After setting the absolute positioning, the color block follows the con...
text-overflow:ellipsis;// clip|ellipsis|string 截断|省略号|自定义字符串} 如果你使用 scss 的话我们可以自定义行数使用,设置 line-hight 和 max-height 最大显示的行高和高度再限制一下显示的问题 代码语言:javascript 复制 @mixin multiline-ellipsis($line:2,$line-height:1.6em){overflow:hidden;text-over...
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.// Mixin .text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // Usage .branch-name { display: inline-block; max-width: 200px; .text-overflow(...
border-box; /* 单行显示省略号 */ overflow: hidden;text-overflow: ellipsis; white-...
语法:text-overflow:clip|ellipsis 默认值:clip; 适用于:所有元素 clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。 ellipsis:当对象内文本一处时显示省略标记(...)。 当然这还是不够的,需要加点调料才能出现效果: 那就是配合 overflow:hidden; ...
嵌入式css样式,就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色: 代码语言:javascript 复制 span{color:red;} 嵌入式css样式必须写在之间,并且一般情况下嵌入式css样式写在之间。 4.3 - 外部式css样式 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个c...