- 單行文字溢出顯示省略號
這種表現在移動端的標題顯示經常會用到，多餘文字不換行且以點點展示，下面的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.test{
width: 100px;
height: 20px;
border: 1px solid #666;
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="test">
如果某個單詞太長，不適合在一個區域內，它擴展到外面：
</div>
</body>
</html>
white-space空格處理
white-space屬性表
| white-space屬性 | 源碼空格 | 源碼換行 | <br>換行 | 容器邊界換行 |
| normal | 合併 | 忽略 | 換行 | 換行 |
| nowrap | 合併 | 忽略 | 換行 | 不換行 |
| pre | 保留 | 換行 | 換行 | 不換行 |
| pre-wrap | 保留 | 換行 | 換行 | 換行 |
| pre-line | 合併 | 換行 | 換行 | 換行 |
https://blog.csdn.net/qq_33706382/article/details/78328188
3個屬性組合使用。
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
核心css語句：
1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
2、white-space: nowrap; （設置文字在一行顯示不能換行）
3、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
2.多行文字溢出顯示省略號
我們在編寫網頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行後還能顯示省略號呢，不要慌，我們css還是很強大的，已經給我們提供了方法來處理這種問題了。
核心css語句：
1、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數,2表示最多顯示2行。 爲了實現該效果，它需要組合其他的WebKit屬性）
2、display: -webkit-box; （和1結合使用，將對象作爲彈性伸縮盒子模型顯示 ）
3、-webkit-box-orient:vertical;（ 和1結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 。）
4、overflow:hidden; （顧名思義超出限定的寬度就隱藏內容）
5、text-overflow: ellipsis;（規定當文本溢出時顯示省略符號來代表被修剪的文本）
