css 处理文字溢出省略相关的样式
01.单行固定宽度溢出省略
.text {
width: 100px;
white-space:nowrap; /* 使文本不可换行 */
overflow:hidden; /* 隐藏溢出部分 */
text-overflow:ellipsis; /* 显示省略符号来代表被隐藏的文本 */
}
使用scss mixin进行封装
// 单行文本省略 需要确定容器宽度
@mixin single-line-ellipsis($width) {
width: $width;
white-space: nowrap; /* 使文本不可换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略符号来代表被隐藏的文本 */
}
02.多行固定宽度溢出省略
``-webkit-line-clamp: 2; ` 关键是line-clamp属性, 从前缀可以看出是webkit内核的浏览器支持的样式.
ie之类的浏览器是不支持的.
.text {
width: 100px;
word-wrap:break-word; /* 内容存在英语或数字时强制换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略符号来代表被隐藏的文本 */
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
-webkit-line-clamp: 2; /* 限制块元素显示的文本的行数 */
}
使用scss mixin封装
// 多行文本固定省略，需要确定行数和宽度
@mixin multi-line-ellipsis($width, $lineCount) {
width: $width;
word-wrap: break-word; /* 内容存在英语或数字时强制换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略符号来代表被隐藏的文本 */
display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
-webkit-line-clamp: $lineCount; /* 限制块元素显示的文本的行数 */
}
03.不定宽溢出省略
很多时候我们都是用flex布局，比如左边是flex:1,右边是固定宽度，这样左边就是不定宽的
这种情况，首先我们想到的是，用clac计算一个宽度，但是其实不是很合适。比如这样calc(100vw -200px),感觉还会有很多问题
我在网上找到一个方法，就是把flex:1的容器，添加min-width:0,这样就能生效了。
