多行元素的 文本省略號
使文字數量不同在相同的地方顯示，給盒子加固定高度
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>