css 中间 省略号显示
导读：CSS中间省略号显示在CSS中，有时我们需要在元素内显示一些过长的内容，但是又不想破坏页面布局，不想强制换行，这时，我们可以使用CSS中的省略号来表示未显示的内容。CSS省略号有三种：1. 文字换行时，省略号用在文本换行处。2. 行内元素省...
CSS中间省略号显示在CSS中，有时我们需要在元素内显示一些过长的内容，但是又不想破坏页面布局，不想强制换行，这时，我们可以使用CSS中的省略号来表示未显示的内容。CSS省略号有三种：1. 文字换行时，省略号用在文本换行处。2. 行内元素省略号。3. 块级元素省略号。以下是具体实现：1. 文字换行时，省略号用在文本换行处。这里使用text-overflow: ellipsis以及white-space: nowrap两个属性来实现，其中text-overflow: ellipsis表示换行处使用省略号，white-space: nowrap表示文字不换行。例如：pre {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在该示例中，我们在标签内填充过长的文本，当该文本溢出父级元素时，我们使用CSS省略号来表示被省略的文本。2. 行内元素省略号使用display: inline-block以及shorttext属性，可以在行内元素内使用省略号。例如：p {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在该示例中，我们使用标签来表示一行内的文本，使用CSS属性来指定文本不换行，溢出时使用省略号代替。3. 块级元素省略号使用display: -webkit-box、-webkit-box-orient和-webkit-line-clamp属性，可以在块级元素内使用省略号。例如：p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
在该示例中，我们使用
标签来表示块级元素，使文本在垂直方向上显示，并设置文本最多只显示两行，超出时使用省略号代替。总结：以上便是在CSS中实现省略号的方法，这些技巧可以帮助我们更好地处理页面中过长的文本内容，同时不会破坏我们的页面布局。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 中间 省略号显示
本文地址： https://pptw.com/jishu/531092.html