這種表現在移動端的標題顯示經常會用到，多餘文字不換行切以點點展示，下面的代碼：
<!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;