如果实现单行文本的溢出显示省略号(…)应该都知道用 text-overflow:ellipsis
属性来,当然还需要加宽度 width
属来兼容部分浏览。
/* 注意需要给width 注意还需要把容器变为块级元素(因为需要给宽度) */
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果图:
适用范围:因使用了 WebKit 的 CSS 扩展属性,该方法适用于 WebKit 浏览器及移动端。
注意事项:
以下示例以 p
为例,具体请根据情况使用标签。
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果图:
适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合 js 优化该方法。
注意事项:
本文地址:https://blog.csdn.net/weixin_44198965/article/details/107583319
如对本文有疑问, 点击进行留言回复!!
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
网友评论