微信小程序> 微信小程序视图容器view中控制文本显示方式

微信小程序视图容器view中控制文本显示方式

浏览量:3714 时间: 来源:得来

小程序中视图容器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
截图来源: “趣报名”小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎