單行或多行文字溢位用省略號替代
阿新 • • 發佈：2020-12-20
CSS苦逼學習日記（9）
當一個文字框的大小裝不下我們所需要的文字的時候，就自然會用到省略號，
下圖的為淘寶的省略號部分就是當文字溢位時用省略號表示。
那麼我們應該怎麼才能做到這樣的效果呢？
下面為如何使用此方法：
1.單行的文字溢位用省略號表示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content 最主要的程式碼塊：
white-space: nowrap;
/* 溢位的部分隱藏起來 */
overflow:hidden;
text-overflow: ellipsis;
1.white-space：
正常情況下是 white-space =normal; 此時表示的是如果文字顯示不開，則會自動換行。
但我們需要不換行 ，則需要：white-space= nowrap; 此式表達的是不換行。
2.overflow:hidden: 因為不換行，文字超過了容器盒子，會在盒子外部顯示，則需要把超出的部分隱藏掉，則使用此式。
3.text-overflow:ellipsis: 此式表達的是超出文字的地方用 省略號表示，ellipse 的意思就是 省略號的意思，此式極為重要，是轉化為省略號的關鍵。
下圖為上述程式碼的執行結果：
2.多行文字溢位用省略號表示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 150px;
height: 65px;
margin: 100px auto;
background-color: pink;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
啥也不說，我就是你大哥，然後此處肯定要省略一萬個字啊哈哈哈哈
</div>
</body>
</html>
程式碼最主要的部分：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
其中 overflow: hidden; 和 text-overflow: ellipsis; 與單行省略的解釋一致；
-webkit-line-clamp: 3; 表示的是在第幾行的末尾超出的部分用省略號來表示。數字3就為第三行末尾開始用省略號表示
-webkit-box-orient: vertical; 和 display: -webkit-box; 背一背熟悉就行
程式碼效果圖：
多行的顯示注意事項：
進行多行文字溢位用省略號代替時一定要控制好文字的長和寬，不然會出現以下情況：
解釋：
雖然我們設定是在第三行進行省略號代替，但是因為盒子的高度足以裝下4-5行甚至更多的文字，所以就在下方繼續顯示我們的文字，最後，注意：
一定要設定好我們盒子的高度和寬度，使得多的文字不會顯示出來！