小程序真机调试换行符无效的解决方案
2024/11/16 11:31:21
2024/11/16 11:31:21
很多小屁孩在开发微信小程序或抖音小程序时发现,换行符\n及\r在电脑编译时没问题,以上真机就不行了。现在讲下解决方案。
通常换行符\n在JS中时可以的,但是在前端真机上确实不行。然而,给文本标签添加style=“white-space: pre-wrap;” ,并用
代替\n是可以实现文本换行的。
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示。
normal:默认,忽略文本中所有的空白、换行符;只有文本存在
或文本达到框的约束时,文本才会换行。
pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
或文本中有换行符时,文本才会换行。
nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行。
pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。
pre-line:会略文本中的空白符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。
案例:
[1] [2]
相关文章(向右看)..
通常换行符\n在JS中时可以的,但是在前端真机上确实不行。然而,给文本标签添加style=“white-space: pre-wrap;” ,并用
代替\n是可以实现文本换行的。
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示。
normal:默认,忽略文本中所有的空白、换行符;只有文本存在
或文本达到框的约束时,文本才会换行。
pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在
或文本中有换行符时,文本才会换行。
nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行。
pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。
pre-line:会略文本中的空白符;文本存在
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行。
案例:
<text style="white-space:pre-wrap;border:1px solid #666;background:#eee; width:240px;height:120px;line-height:20px;font-size:11px;line-height:20px;position:relative;top:-506px;padding:20px;display:block" bindtap='bbclose'>
《用户协议及隐私政策》本协议是您在使用本服务过程中所订立的有关用户权益和隐私约定。<br/>
本服务不搜集任何用户隐私,手机号仅用于缓存,特此申明。<br/>
</text>
相关文章(向右看)..