HTML设置div最后一行 超出用胜略号
最新回答
红杏没墙⌒
2025-06-27 06:34:32
<div class="zan-text-1"> <p> 佚站互联以建设展示型网站为起点，结合创新理念与进取精神，为创造个人、企业、组织与社会之间的信息平台，让更多人能够方便快捷地传递信息而努力。 </p></div>
<div class="zan-text-2"> <p> 佚站互联以建设展示型网站为起点，结合创新理念与进取精神，为创造个人、企业、组织与社会之间的信息平台，让更多人能够方便快捷地传递信息而努力。 </p></div>
CSS：
.zan-text-1 { color: #FFF; background: #000; width: 410px; height: 22px;}
.zan-text-2 { color: #FFF; background: #000; width: 410px; height: 44px;}
p { line-height: 22px;}
JS（引入jQuery）：
$("div[class*='zan-text']").each(function(e){ var divHeight = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divHeight) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); };});
通过上述代码可以发现，实现这个效果的主要原理在于通过子容器（p）与父容器（div）高度的比较根据正则表达式进行字符截取，直到两者相等为止。
所以控制截取行数的关键自然在div高度上了。
另外分享一个非常简洁方便的实现方式，不过遗憾的是该方法只在webkit内核的浏览器下有效。
<p> 佚站互联以建设展示型网站为起点，结合创新理念与进取精神，为创造个人、企业、组织与社会之间的信息平台，让更多人能够方便快捷地传递信息而努力。</p>
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
其中-webkit-line-clamp属性控制截取文本行数，上述值为两行。
以上信息引用于
http://www.yeahzan.com/blog/item/42-37.html
，要是觉得格式很乱，直接到这里看就行。
热门标签
