位置:电子教程 > 微信小程序设计教程 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 文本溢出(text-overflow)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 单词间隔(text-justify) 下一篇: 文本阴影(text-shadow)

1.基础语法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

属性值如下:

描述

clip

修剪文本。

ellipsis

显示省略符号来代表被修剪的文本。

string

使用给定的字符串来代表被修剪的文本。

小程序应用

根据基础的语法,下面在微信小程序中实现文本超出宽度后,隐藏文本,后面跟上省略号。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.cls{
   width:19em; /* 定义宽度 */
   overflow: hidden;
   white-space: nowrap; /* 不换行,如果换行,则不会出现省略号 */
   text-overflow: ellipsis;
}

效果如图3-10所示

image.png


上一篇: 单词间隔(text-justify) 下一篇: 文本阴影(text-shadow)
QQ交流群:147415688             广告联系QQ:45157718(微信同号)