在css中，使用“…”适用于多条线路的溢流块

Question

在css中，使用“…”适用于多条线路的溢流块

带着

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. */

+--------------------+

Answer 1

附带了几个注意事项：它不是纯CSS；您必须添加一些HTML元素。但是，不需要JavaScript。省略号在最后一行对齐.这意味着如果你的文本不对齐或对齐，最后一个可见词和省略号之间可能会有明显的差距(取决于第一个隐藏单词的长度)。省略号的空间总是保留的。这意味着，如果文本几乎精确地放入框中，那么它可能会被不必要地截断(最后一个单词是隐藏的，尽管技术上它不必这样做)。您的文本需要有固定的背景色，因为在不需要省略的情况下，我们使用彩色矩形来隐藏省略号。我还应该指出，文本将在一个单词边界而不是字符边界处被打破。这是深思熟虑的(因为我认为这更适合长时间的文本)，但因为它与什么不同text-overflow: ellipsis是的，我想我应该提一提。如果您可以接受这些警告，HTML如下所示：<div class="ellipsify">     <div class="pre-dots"></div>     <div class="dots">&hellip;</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中不起作用。