微信小程序 - 防止容器内文字过长导致溢出(view / text)

前言

在微信小程序中,对 viewtext 均有效,标题文本太长显示不下,能有效控制文字超出。

我们无法预知后端数据有多少,一旦文字超出容器宽度,那么必然会造成界面变形,下面是解决方案。

单行

顾名思义,只显示一行。

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

多行

顾名思义,自定义显示多少行。

text-overflow: ellipsis; 
display: -webkit-box;  
-webkit-line-clamp: 2;/* 这里控制行数 */
-webkit-box-orient: vertical;

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/107897840