- 文本超长不换行 white-space: nowrap;
.item {
background-color: blue;
width: 15rem;
white-space: nowrap;
}
- 文本超长 一行 & 文本溢出省略号
.item {
background-color: blue;
width: 15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
- 多行文本溢出省略号(按行数)
.item {
background-color: blue;
width: 15rem;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)
display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
-webkit-box-orient: vertical;(和 1 结合使用 ,设置伸缩盒对象的子元素应该被水平或垂直排列 )
- 单行居中显示文字,多行居左显示,限制行数省略号...
<div class="container">
<p>
<em>一行文字一行文字</em>
</p>
</div>
.container {
width: 200px;
padding: 20px;
border: 5px solid rgb(111,41,97);
text-align: center;
}
p {
margin: 1rem 0 1rem 0;
background-color: #ff0000;
display: inline-block;
text-align: left;
}
em {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-style:normal;
}