1.单行文本溢出添加省略号
p{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2.多行文本溢出添加省略号
p{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
display:-webit-box; 将对象作为弹性伸缩盒子模型;
-webkit-box-orient:vertical; 设置弹性伸缩盒内部垂直排列;
-webkit-line-clamp:2; 限制显示的文本行数。
3.宽度自适应时文本溢出时添加省略号
<div class="box">
<p class="text">我是一段文字,我超出后会被添加省略号!</p>
</div>
<script>
$(".text").css("width",$(".box").width()+"px")
</script>
<style>
p{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
利用js获取文本父元素的宽度,然后给文本添加同等宽度样式。