在我们日常开发前端页面时,经常会遇到下面这种情况,这是因为一行文字过长,超出了容器的宽度。
这时我们可以对容器进行简单的CSS设置,使得溢出部分的文字用省略号显示:
<!-- html部分 -->
<div class = "container">
<span> 一行文字超出部分省略号显示 </span>
</div>
/*css部分*/
.container{
width: 150px;
height: 20px;
border: 2px solid pink;
font-size: 14px;
color: #000;
margin: 100px auto;
white-space: nowrap; /*规定段落中的文本不进行换行*/
overflow: hidden; /*溢出部分隐藏*/
text-overflow: ellipsis; /*溢出文字以省略号代替显示*/
}
在原本容器的CSS样式中添加了带有注释的三行代码后,溢出部分的文字就被省略号代替了,此时页面显示为:
补充:设置多行文本溢出部分省略号显示
.container{
display: -webkit-box;
overflow: hidden;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*显示的行数*/
}