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

柔情只为你懂 2024-02-19 15:55 43阅读 0赞

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

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

基础用法  
word-wrap 属性允许长单词或 URL 地址换行到下一行。  
word-wrap： normal | break-word

值 描述  
normal 只在允许的断字点换行（浏览器保持默认处理）。  
break-word 在长单词或 URL 地址内部进行换行。

### 小程序应用 ###

> Wxml代码

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

> Wxss代码

view{
      width: 150px;
      border: 1rpx solid gainsboro;
      margin: 5px;
    }
    .cls1{
      word-break: break-all;/*允许在单词内换行。*/
    }
    .cls2{
      word-wrap:  break-word;/*在长单词或 URL 地址内部进行换行。*/
    }

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

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

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