text-overflow原本是CSS3的一个属性。在微信小程序中也支持。下面我们一步步的进行~
text-overflow文本溢出显示省略号~
注:使用text-overflow时,需要设置固定的宽度才起作用,所以该元素必须具有块状元素的属性(款装元素+行内块状元素)
1、一行文本溢出显示省略号
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
1》要实现这个功能,除了text-overflow: ellipsis;是必须之外,还必须满足:
overflow:
hidden;
/*隐藏溢出的文本 */
white-space:
nowrap;
/*不换行 */
2》帮助理解实例
先上效果:
源码:
wxml代码:
<view>
<text>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</text>
</view>
wxss代码:
text{
display: inline-block;
width: 400rpx;
border: 1rpx solid gray;
margin: 30rpx 60rpx;
overflow: hidden; /*隐藏溢出的文本 */
white-space:nowrap; /*不换行 */
text-overflow: ellipsis;
}
2、多行文本的最后一行溢出显示省略号
1》需要满足以下:
display: -webkit-box ;
overflow: hidden; /*隐藏溢出的文本 */
text-overflow: ellipsis;
word-break: break-all;/*自动换行*/
-moz-box-orient: vertical; /*从上到下自动排列子元素*/
-webkit-box-orient: vertical;
-webkit-line-clamp:2; /*显示的行数*/
2》下面结合实例看效果
源码:
wxml代码
与前面一样~
wxss代码
text{
display: inline-block;
width: 400rpx;
border: 1rpx solid gray;
margin: 30rpx 60rpx;
display: -webkit-box ;
overflow: hidden; /*隐藏溢出的文本 */
text-overflow: ellipsis;
word-break: break-all;/*自动换行*/
-moz-box-orient: vertical; /*从上到下自动排列子元素*/
-webkit-box-orient: vertical;
-webkit-line-clamp:2; /*显示的行数*/
}