小程序中视图容器view组件中文本显示方式控制方式其实是比较灵活的,缺省的文本显示方式是normal方式(white-space:normal),如果要其他方式,就要自行修改style样式。
例如下面这段view的定义使用缺省style:
<view class="p">{{ item.content }}</view>不修改情况下的显示效果:
然后我们对white-space做一下修改
<view class="p" style="white-space:pre-line">{{ item.content }}</view>pre-line就是使换行符生效。显示效果如下:
如果我们需要单行显示,而且太长情况下显示省略号的话,修改如下:
<view class="p" style="white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.content }}</view>white-space:nowrap忽略空格制表换行符,overflow:hidden不显示超出部分,text-overflow:ellipsis一行显示不完全的话结尾添加省略符号。显示效果如下:
基本掌握了吧,更多控制可以看看底下的white-space参考资料
参考资料:
view组件: https://developers.weixin.qq.com/miniprogram/dev/component/
white-space详解: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
截图来源: “趣报名”小程序













