一、CSS overflow 属性
要实现CSS文本两行超出隐藏，我们可以使用CSS overflow属性。overflow属性定义了当一个容器内部的内容超出容器的尺寸时该怎么办。
当我们设置overflow: hidden;时，内容超出容器的部分将被隐藏。
代码示例：
.container {
height: 40px; /* 设置容器高度 */
overflow: hidden; /* 隐藏容器内部超出的内容 */
}
二、CSS text-overflow 属性
当我们使用overflow: hidden;时，容器内部超出的文本会被隐藏，但这可能导致文本截断，看起来不够好看。为了实现文本两行超出隐藏，我们可以使用CSS text-overflow属性。
text-overflow属性规定了当文本溢出包含它的元素时发生的事情，我们可以使用它来添加省略号来表示被截断的文本。
代码示例：
.container {
width: 200px; /* 设置容器宽度 */
white-space: nowrap; /* 强制在一行中渲染文本 */
overflow: hidden; /* 隐藏容器内部超出的内容 */
text-overflow: ellipsis; /* 添加省略号 */
}
三、使用多行文本省略号
如果我们需要支持多行文本溢出隐藏，我们可以使用CSS的display属性和伪元素来实现。
我们可以将元素设置为display: -webkit-box; 将文本设置为-webkit-box-orient: vertical;，这样我们就可以将文本垂直显示。我们还可以使用伪元素来添加省略号。
代码示例：
.container{
width: 200px; /* 设置容器宽度 */
height: 80px; /* 设置容器高度 */
display: -webkit-box; /* 使用 box 布局 */
-webkit-box-orient: vertical; /* 设置元素垂直排列 */
overflow: hidden; /* 隐藏超出范围的内容 */
}
.container::after {
content: "";
display: inline-block;
width: 1em; /* 加上省略号所占据的空间 */
margin-left: 3px; /* 省略号与文本之间的距离 */
background: #fff; /* 隐藏省略号 */
}
四、小结
以上就是如何实现CSS文本两行超出隐藏的几种方法，我们可以根据自己的需求选择不同的方法来实现。CSS的强大之处在于它提供了很多方法来控制元素的布局和外观，我们可以根据需要选用最适合的样式进行美化。
原创文章，作者：NTTPZ，如若转载，请注明出处：https://www.506064.com/n/369311.html
微信扫一扫 
支付宝扫一扫 