微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-overflow 文本溢出

分类: 文章 • 2024-02-18 15:09:59

基础用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

text-overflow: clip | ellipsis | string

值描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

Wxml代码

<view class='cls'>
  当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家
</view>

Wxss代码

.cls{
   width:19em;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

效果下图
微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-overflow 文本溢出