[分享]css内容过长显示省略号

随着网页的发展，CSS样式的使用越来越广泛。在CSS中，经常会遇到内容过长的情况，这时为了美观和展示效果，需要将内容截断并显示省略号。下面介绍一种简单的实现方式。首先，我们可以使用CSS中的texto...

随着网页的发展，CSS样式的使用越来越广泛。在CSS中，经常会遇到内容过长的情况，这时为了美观和展示效果，需要将内容截断并显示省略号。下面介绍一种简单的实现方式。
首先，我们可以使用CSS中的text-overflow属性来实现文本截断。该属性用于指定当文本溢出容器时应该如何进行处理。我们可以将它的值设置为ellipsis（省略号），这样就可以在文本截断的地方显示省略号了。具体的代码如下：
pre{
white-space: normal; /* 避免pre标签默认的单词换行*/
overflow: hidden; /* 隐藏溢出的部分*/
text-overflow: ellipsis; /* 显示省略号*/
}
在上面的代码中，我们使用了pre标签来展示代码示例，同时为了避免pre标签默认的单词换行，使用了white-space: normal属性来取消该效果。然后使用overflow:hidden属性来隐藏溢出的部分，而使用text-overflow: ellipsis属性来显示省略号。
需要注意的是，该属性只适用于一行文本，如果你想要截断多行文本，可以使用line-clamp属性。这个属性可以指定应该显示多少行文本，超出的部分将被截断并显示省略号。具体的代码如下：
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
在以上代码中，使用了display: -webkit-box属性来创建一个块级元素，并设置其为一个伸缩盒。然后使用-webkit-box-orient: vertical属性来指定应该垂直排列元素。接着使用-webkit-line-clamp: 2属性来指定应该设置多少行文本。最后使用overflow: hidden属性来隐藏超出部分，并使用text-overflow: ellipsis属性来显示省略号。
以上就是关于CSS内容过长显示省略号的简单介绍，希望对你有所帮助。