多行元素的 文本省略号
使文字数量不同在相同的地方显示，给盒子加固定高度
overflow：hidden;
display：-webkit-box; 将盒子转换为弹性盒子
-webkit-line-clamp：2; 设置显示多少行
text-overflow：ellipsis; 文本以省略号显示
-webkit-box-orient：vertical; 文本显示方式，默认水平多行代码的文本后省略号代码样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.txt-cut {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="txt-cut">这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字这是一行多行文本溢出的文字</div>
</body>
</html>
单行元素的文本省略号
white-space: nowrap; 规定段落中的文本不进行换行
.single-cut {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}<textarea class="single-cut">单行文本省略号单行文本省略号单行文本省略号单行文本省略号单行文本省略号</textarea>
2453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
