css中实现单行多行文字截断

在网页设计中，我们常常需要实现文字截断，使得超过一定长度的文字只显示一部分，而不会破坏网页布局。在CSS中，有两种常用的文字截断方式，分别为单行截断和多行截断。
1. 单行截断
单行截断是指只针对一行文字进行截断。在CSS中，可以使用text-overflow和overflow属性来实现单行截断。其中，text-overflow属性用于定义当文本溢出包含它的元素时应该发生什么。而overflow属性则用于定义当元素的内容超出其尺寸时应该发生什么。
以下是单行截断的CSS代码：
pre {
white-space: nowrap; /* 强制文本不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略符 */
}
在上述代码中，我们使用了nowrap属性来强制文本不换行，overflow属性来隐藏超出部分，并使用text-overflow: ellipsis来显示省略符号。
2. 多行截断
多行截断是指针对多行文字进行截断。在CSS中，可以使用line-clamp和-webkit-line-clamp属性来实现多行截断。其中，line-clamp属性用于定义显示的文本行数，-webkit-line-clamp则是Safari和Chrome私有的属性。
以下是多行截断的CSS代码：
p {
display: -webkit-box; /* 将元素变为弹性盒子 */
-webkit-box-orient: vertical; /* 将弹性盒子垂直排列 */
-webkit-line-clamp: 3; /* 最多显示3行 */
overflow: hidden; /* 超出部分隐藏 */
}
在上述代码中，我们使用了-webkit-box属性将元素变为弹性盒子，并使用-webkit-line-clamp来定义最多显示的行数，然后使用overflow属性隐藏超出部分。
总结：
无论是单行截断还是多行截断，都是CSS中常用的文字截断方式。通过合理地应用这些属性，我们可以实现各种不同样式的文字截断效果，使得网页设计更加完美。