小编典典

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

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

阅读 291

收藏
2020-05-16

共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中不起作用。

2020-05-16