裁切单行文字
.text-overflow{
text-overflow: ellipsis;
width:70px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
裁切多行文字
.text-overflow{
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
display: inline-block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
宽度依据实际使用进行调整
问题整理
如果是左右布局,右侧的内容需要裁剪,出现无法裁剪时,检查一下右侧的宽度。
确保右侧的宽度为左右两个容器的总宽 - 左侧宽度 剩下的宽度,如果有间距需要减去间距。
注意calc的时候,符号间加空格,否则计算会失败。
即:$w:500px; $wL:100px;
w
R
:
c
a
l
c
(
100
wR:calc(100% - #{
wR:calc(100wL});
带间距:$w:500px; $wL:100px; $g:30px;
w
R
:
c
a
l
c
(
100
wR:calc(100% - #{
wR:calc(100wL} - #{$g});