位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 自动换行(word-break)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 处理空白符(white-space) 下一篇: 长词换行word-wrap

基础语法

word-break 属性规定自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。属性说明如下:

描述

normal

使用浏览器默认的换行规则。

break-all

允许在单词内换行。

keep-all

只能在半角空格或连字符处换行。

2.小程序应用

根据基础的语法,下面在微信小程序中在文本word里面实现换行。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view>
 
<view>
This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图3-13所示

image.png


上一篇: 处理空白符(white-space) 下一篇: 长词换行word-wrap
毕业设计网             广告联系QQ:45157718(微信同号)