css裁剪裁切长文本、css裁剪裁切单行文字、css裁剪裁切多行文字显示省略号 ...

裁切单行文字

.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; $wR:calc(100$wL});
带间距：$w:500px; $wL:100px; $g:30px; $wR:calc(100$wL} - #{$g});