多行文本溢出省略
多行文本溢出省略
在做微信公众号开发时,有个需求是这样的
找到了一个方法,
<div>
2323文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。
</div>
<!-- 上面这样写是无效的-->
<!--
下面这样写才有效果
1,需要在p标签内(其他行内标签没事尝试,比较懒),
2,需要加两行注释 /* autoprefixer: off */ 和 /* autoprefixer: on */
至于原因还不清楚,弄明白了之后再更新
-->
<div>
<p>2323文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示。</p>
</div>
p{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
/* autoprefixer: off */
-webkit-box-orient:vertical;
/* autoprefixer: on */
-webkit-line-clamp:2;
}
以上方法出自原文地址https://blog.csdn.net/weixin_41719836/article/details/80135445#commentsedit
非常感谢