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

缺乏、安全感 2024-02-19 15:54 38阅读 0赞

### 基础用法 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

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 文本溢出][-_wxss_css_-_-text-overflow]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-text-overflow 文本溢出][-_wxss_css_-_-text-overflow 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-text-overflow]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a6652cc27cf0408dbe98c1a06d7c35d7.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[-_wxss_css_-_-text-overflow 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b25dc167e4f2460f855df35d55b2e298.png