小程序最多展示15个字超出用省略号代替,容器不设置宽高 css代码实现
时间: 2024-03-25 15:36:45 浏览: 72
微信小程序实现多行文字超出部分省略号显示功能
5星 · 资源好评率100%
如果容器没有设置宽高,想要实现文字超出15个字时使用省略号代替,可以使用display属性的inline-block值来实现。示例如下:
```
/* 设置文字超出部分使用省略号代替 */
.element p {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
```
其中,-webkit-box-orient属性值为vertical,表示将文本内容垂直排列;-webkit-line-clamp属性值为1,表示限制文本只显示一行。这样设置后,当元素中的p标签中的文字超过15个字时,就会自动使用省略号代替,并且不会影响到容器的宽高。需要注意的是,这种方法只能在webkit内核的浏览器中使用,其他浏览器可能不支持。
阅读全文