使用css3實現文本超出省略號和多行省略號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 設置單行文本超出省略 */
.row-text-hidden {
/* 固定寬度，超過寬度就換行 */
width: 100px;
/* 設置超出隱藏 */
overflow: hidden;
/* 設置文本不可換行 */
white-space: nowrap;
/* 設置省略號顯示 */
text-overflow: ellipsis;
/* 區分 */
background: #af9aa9;
}
.rows-text-hidden {
/* 固定寬度，超過寬度就換行 */
width: 100px;
/* 設置超出隱藏 */
overflow: hidden;
/* 設置省略號顯示 */
text-overflow: ellipsis;
/* 設置一共顯示兩行 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* 區分 */
background: #f00;
}
</style>
</head>
<body>
<div class="row-text-hidden">
我是一只小可愛小尅啊小可愛我是一只小可愛小尅啊小可愛我是一只小可愛小尅啊小可愛
</div>
<div class="rows-text-hidden">
我是一只小可愛小尅啊小可愛我是一只小可愛小尅啊小可愛我是一只小可愛小尅啊小可愛
</div>
</body>
</html>
注意：多行省略號的方法只適合谷歌WebKit內核的瀏覽器
文字換行方式
word-break: normal; /* 默認值，英語以單詞空格為分隔點，漢字日本字等方塊字每個字符都是分隔點 */
word-break: break-all; /* 不論英語或者方塊字，寬度達到就立刻換行 */
word-break: keep-all; /* 不論英語或者方塊字，只以空格為基准換行 */
word-break: break-word; /* `word-break: normal` 和 `overflow-wrap: anywhere` 的和 */
/* overflow-wrap僅在無法將整個單詞放在自己的行而不會溢出的情況下才會產生中斷。 */
overflow-wrap: normal; /* 行只能在正常的單詞斷點處中斷。 */
overflow-wrap: anywhere; /* 一般情況與break-word表現一致 */
overflow-wrap: break-word; /* 表示如果行內沒有多余的地方容納該單詞到結尾，則那些正常的不能被分割的單詞會被強制分割換行。 */
方塊字：中文/日文/韓文
overflow-wrap: anywhere; 一般表現與overflow-wrap: break-word一致，但是如果 width 設置為 min-content,
overflow-wrap: anywhere是以單個字母換行，而 overflow-wrap: break-word`是以單詞為間隔點
{{uploading-image-721626.png(uploading...)}}