这种表现在移动端的标题显示经常会用到，多余文字不换行切以点点展示，下面的代码：
<!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;