使用CSS时，对多行的溢出块使用“…”

Question

与

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；它不是纯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中不起作用。