与
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
如果溢出,将在行的末尾显示“ …”。但是,这将仅显示在一行中。但我希望将其以多行显示。
它可能看起来像:
+--------------------+ |abcde feg hij dkjd| |dsji jdia js ajid s| |jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */ +--------------------+
我设法做到这一点。它带有一些警告:
text-overflow: ellipsis
如果您可以忍受这些警告,那么HTML如下所示:
<div class="ellipsify"> <div class="pre-dots"></div> <div class="dots">…</div> <!-- your text here --> <span class="hidedots1"></span> <div class="hidedots2"></div> </div>
这是相应的CSS,以一个150像素宽的框为例,在白色背景上带有三行文本。假定您有CSS重置或类似的重置,可在必要时将边距和填充设置为零。
/* the wrapper */ .ellipsify { font-size:12px; line-height:18px; height: 54px; /* 3x line height */ width: 150px; overflow: hidden; position: relative; /* so we're a positioning parent for the dot hiders */ background: white; } /* Used to push down .dots. Can't use absolute positioning, since that would stop the floating. Can't use relative positioning, since that would cause floating in the wrong (namely: original) place. Can't change height of #dots, since it would have the full width, and thus cause early wrapping on all lines. */ .pre-dots { float: right; height: 36px; /* 2x line height (one less than visible lines) */ } .dots { float: right; /* to make the text wrap around the dots */ clear: right; /* to push us below (not next to) .pre-dots */ } /* hides the dots if the text has *exactly* 3 lines */ .hidedots1 { background: white; width: 150px; height: 18px; /* line height */ position: absolute; /* otherwise, because of the width, it'll be wrapped */ } /* hides the dots if the text has *less than* 3 lines */ .hidedots2 { background: white; width: 150px; height: 54px; /* 3x line height, to ensure hiding even if empty */ position: absolute; /* ensures we're above the dots */ }
为了阐明其工作原理,以下是同一张图片,不同的.hidedots1是用红色和.hidedots2青色突出显示。当没有不可见的文本时,这些矩形将隐藏省略号:
在IE9,IE8(模拟),Chrome,Firefox,Safari和Opera中进行了测试。在IE7中不起作用。