文本溢出隐藏的几种情况
一、仅文本溢出隐藏
仅将超出固定宽高的容器的文本隐藏，不做任何处理
html代码块
<div class="box">于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”</div>
css代码块
<style>
.box {
width: 100px;
height: 100px;
background-color: palevioletred;
}
</style>
注意：一定要给容器设置固定宽和高！否则容器会被内容撑开，内容就不会溢出了！
文本溢出效果图
文本溢出.png
- 可以看出容器里面的内容已经超出了容器，我们只需要添加overflow: hidden将超出的内容隐藏即可
css代码块
<style>
.box {
width: 100px;
height: 100px;
background-color: palevioletred;
overflow: hidden;/*溢出隐藏*/
}
</style>
隐藏后的效果图
文本隐藏.png
- 可以看出，这种效果只是将超出容器的文本内容隐藏，容器多大，文本就显示多少，这种效果也不好看，并且在实际开发中，这种效果也并不是我们想要的效果。那我们就再看看其他的方法。
二、单行文本溢出隐藏并且显示省略号
如果文字超出容器的固定宽度，文字会自动换行，而连续不间断数字和英文字母不会自动换行。那当我们实际可能只需要文本显示一行，那我们就需要将超出一行的内容隐藏并且显示省略号，就需要设置其他的样式。
css代码块
<style>
.box {
width: 400px;
line-height: 50px;
background-color: palevioletred;
white-space: nowrap;/*禁止换行*/
overflow: hidden;/*溢出部分隐藏*/
text-overflow: ellipsis;/*文本溢出部分显示省略号*/
}
</style>
单行文本隐藏显示省略号效果图
单行文本隐藏.png
三、多行本文溢出隐藏并且显示省略号
多行文本溢出隐藏，采用的是自适应布局中的-webkit-box布局。
css代码块
<style>
.box {
width: 400px;
line-height: 50px;
background-color: palevioletred;
display: -webkit-box;/*自适应布局——-webkit-box布局*/
overflow: hidden;/*溢出隐藏*/
-webkit-box-orient: vertical;/*在父元素设置子元素的排列式——垂直*/
-webkit-line-clamp: 2;/*显示文本的行数——2行，可根据需要修改*/
}
</style>
多行文本溢出隐藏效果图
多行文本隐藏.png
