微信小程序开发中text-overflow属性的使用

最新推荐文章于 2024-07-12 11:50:53 发布

原创最新推荐文章于 2024-07-12 11:50:53 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何在微信小程序中利用CSS3的text-overflow属性实现文本溢出时显示省略号的效果，包括一行和多行文本的处理方法。

text-overflow原本是CSS3的一个属性，在微信小程序中也支持。

text-overflow文本溢出显示省略号~

注：使用text-overflow时，需要设置固定的宽度才起作用，所以该元素必须具有块状元素的属性（款装元素+行内块状元素）

1、一行文本溢出显示省略号

overflow: hidden;
white-space:nowrap;   
text-overflow: ellipsis;

2、多行文本的最后一行溢出显示省略号

display: -webkit-box ;
overflow: hidden; /*隐藏溢出的文本  */
text-overflow: ellipsis;
word-break: break-all;/*自动换行*/
-moz-box-orient: vertical; /*从上到下自动排列子元素*/
-webkit-box-orient: vertical; 
-webkit-line-clamp:2; /*显示的行数*/

转载： https://www.cnblogs.com/neo-java/p/10219563.html