小程序scroll-view换行问题

背景

今天在写小程序的时候使用了scroll-view,可是发如今scroll-view中一行文字不能换行,代码以下:前端

<scroll-view scroll-y style="width:100rpx;height:100rpx;">
asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj
</scroll-view>
复制代码

发现scroll-view内的一大段英文只显示在一行,超出宽度的部分不能被隐藏了小程序

解决

在网上搜索了一下小程序scroll-view文字不能换行的问题后,发现原来是小程序组件有一个默认的样式 white-space: nowrap;,默认是不换行的,因此我就添加了white-space:normal !important;来覆盖它的默认样式,可是事与愿违,加上后仍是不行,因而我又搜索了文字换行,发现通常的文字换行都会加上word-break: break-all;我加上后发现确实能够了前端工程师

word-break

因为我不是专业的前端(正努力成为一个合格的前端工程师),因此我有特意看了一下word-break的用法,下面是个人一些理解,若有错误,烦请指正spa

  • 语法:word-break : normal | break-all | keep-allcode

  • 参数:orm

    • normal : 依照亚洲语言和非亚洲语言的文本规则,容许在字内换行上面我写的例子没有换行是由于英文是根据空格来判断是否要换行的,例子中是一长串英文字符没有空格,因此就没有换行,在中间加上一个空格,就会在空格处进行换行,中文是每一个汉字都是一个独立的个体,每一个字均可以做为换行的标识
    • break-all : 该行为与亚洲语言的normal相同。也容许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,这个值会将单个的英文字符断定为独立的个体,每一个英文字符均可以做为换行的表示
    • keep-all :与全部非亚洲语言的normal相同。对于中文,韩文,日文,不容许字断开。适合包含少许亚洲文本的非亚洲文本
相关文章
相关标签/搜索