在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

附带了几个注意事项：

1. 它不是纯CSS；您必须添加一些HTML元素。但是，不需要JavaScript。
2. 省略号在最后一行对齐.这意味着如果你的文本不对齐或对齐，最后一个可见词和省略号之间可能会有明显的差距(取决于第一个隐藏单词的长度)。
3. 省略号的空间总是保留的。这意味着，如果文本几乎精确地放入框中，那么它可能会被不必要地截断(最后一个单词是隐藏的，尽管技术上它不必这样做)。
4. 您的文本需要有固定的背景色，因为在不需要省略的情况下，我们使用彩色矩形来隐藏省略号。

我还应该指出，文本将在一个单词边界而不是字符边界处被打破。这是深思熟虑的(因为我认为这更适合长时间的文本)，但因为它与什么不同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中不起作用。