微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-break

ゞ浴缸里的玫瑰 2024-02-19 15:54 2阅读 0赞

### 样式wxss中使用css课程-文本-word-break ###

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

基础用法  
word-break 属性规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。  
word-break：normal | break-all | keep-all

值 描述  
normal 使用浏览器默认的换行规则。  
break-all 允许在单词内换行。  
keep-all 只能在半角空格或连字符处换行。

### 小程序应用 ###

> Wxml代码

<view>
    This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
    </view>
    
    <view class='cls1'>
    This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
    
    </view>

> Wxss代码

view{
      width: 150px;
      border: 1rpx solid gainsboro;
      margin: 5px;
    }
    .cls1{
      word-break: break-all;/*允许在单词内换行。*/
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-文本-word-break][-_wxss_css_-_-word-break]

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

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