div里面的内容超出自身高度时，显示省略号

最新推荐文章于 2024-07-10 16:10:21 发布

转载最新推荐文章于 2024-07-10 16:10:21 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wyaocn/p/5830583.html

文章标签：

本文介绍了一种使用jQuery实现的多行文本省略号效果的方法，通过动态调整文本内容，确保超过指定高度的div容器内的多行文本能够正确显示为省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.给DIV设置属性：width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候，超出的部分会以“...”的形式显示。

2.上面那个案例之适用于单行文本的现实，才会有效。但当div里面的内容出现多行的时候则不能达到预期的效果。下面是解决多行的时候显示“...”的方案。

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".figcaption").each(function (i) {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
});
</script>
<style>
.figcaption
{
background: #EEE;
width: 410px;
height: 3em;
margin: 1em;
}
.figcaption p
{
margin: 0;
line-height: 1.5em;
}
</style>
</head>
<body>
<div class="figcaption">
<p>
You probably can't do it (currently?) without a fixed-width font like Courier. With
a fixed-width font every letter occupies the same horizontal space, so you could
probably count the letters and multiply the result with the current font size in
ems or exs. Then you would just have to test how many letters fit on one line, and
then break it up.</p>
</div>
</body>
</html>