Html 使用 CSS，对溢出的多行块使用“...”

Question

提问by Ovilia

with

和

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

"..." will be shown in the end of the line if overflowed. However, this will be shown only in one line. But I would like it to be shown in multi-lines.

如果溢出，“...”将显示在行尾。但是，这将仅显示在一行中。但我希望它以多行显示。

It may looks like:

它可能看起来像：

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Answer 1

采纳答案by Jim Thomas

There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:

还有几个 jquery 插件可以处理这个问题，但很多不处理多行文本。以下作品：

There also some preformance tests.

还有一些性能测试。

Answer 2

回答by balpha

I have hacked around until I've managed to achieve something close to this. It comes with a few caveats:

我一直在努力，直到我设法实现了与此接近的目标。它有一些警告：

It's not pure CSS; you have to add a few HTML elements. There's however no JavaScript required.
The ellipsis is right-aligned on the last line. This means that if your text isn't right-aligned or justified, there may be a noticable gap between the last visible word and the ellipsis (depending on the length of the first hidden word).
The space for the ellipsis is always reserved. This means that if the text fits in the box almost precisely, it may be unnecessarily truncated (the last word is hidden, although it technically wouldn't have to).
Your text needs to have a fixed background color, since we're using colored rectangles to hide the ellipsis in cases where it's not needed.

它不是纯 CSS；您必须添加一些 HTML 元素。但是不需要 JavaScript。
省略号在最后一行右对齐。这意味着，如果您的文本未右对齐或两端对齐，则最后一个可见单词和省略号之间可能会有明显的间隙（取决于第一个隐藏单词的长度）。
省略号的空间总是保留的。这意味着如果文本几乎精确地适合框，它可能会被不必要地截断（最后一个单词被隐藏，尽管技术上不必这样做）。
您的文本需要具有固定的背景颜色，因为我们使用彩色矩形在不需要的情况下隐藏省略号。

I should also note that the text will be broken at a word boundary, not a character boundary. This was deliberate (since I consider that better for longer texts), but because it's different from what text-overflow: ellipsisdoes, I thought I should mention it.

我还应该注意，文本将在单词边界处断开，而不是字符边界处。这是故意的（因为我认为这对于更长的文本更好），但因为它与实际不同text-overflow: ellipsis，我想我应该提到它。

If you can live with these caveats, the HTML looks like this:

如果你能接受这些警告，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>

And this is the corresponding CSS, using the example of a 150 pixel wide box with three lines of text on a white background. It assumes you have a CSS reset or similar that sets margins and paddings to zero where necessary.

这是相应的 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 */
}

The result looks like this:

结果如下所示：

image of the rendered result with different text lengths

具有不同文本长度的渲染结果图像

To clarify how it works, here's the same image, except that .hidedots1is hightlighted in red, and .hidedots2in cyan. These are the rectangles that hide the ellipsis when there's no invisible text:

为了阐明它是如何工作的，这里有相同的图像，只是.hidedots1用红色和.hidedots2青色突出显示。这些是在没有不可见文本时隐藏省略号的矩形：

the same image as above, except that the helper elements are highlighted in color

与上面相同的图像，除了辅助元素以颜色突出显示

Tested in IE9, IE8 (emulated), Chrome, Firefox, Safari, and Opera. Does not work in IE7.

在 IE9、IE8（模拟）、Chrome、Firefox、Safari 和 Opera 中测试。在 IE7 中不起作用。

Answer 3

回答by Danield

Here's a recent css-tricks articlewhich discusses this.

这是最近讨论的css-tricks 文章。

Some of the solutions in the above article (which are not mentioned here) are

上面文章中的一些解决方案（这里没有提到）是

1) -webkit-line-clampand 2) Place an absolutely positioned element to the bottom right with fade out

1)-webkit-line-clamp和 2) 将绝对定位的元素放置在右下角并淡出

Both methods assume the following markup:

这两种方法都假定以下标记：

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

with css

用CSS

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-clamp

line-clamp FIDDLE(..for a maximum of 3 lines)

线夹 FIDDLE（..最多 3 条线）

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) fade out

2）淡出

Let's say you set the line-height to 1.2em. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3). The hidden overflow will hide the rest.

假设您将行高设置为 1.2em。如果我们要暴露三行文本，我们可以将容器的高度设为 3.6em（1.2em × 3）。隐藏的溢出将隐藏其余部分。

Fade out FIDDLE

淡出小提琴

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Solution #3 - A combination using @supports

解决方案 #3 - 使用@supports的组合

We can use @supports to apply webkit's line-clamp on webkit browsers and apply fade out in other browsers.

我们可以使用@supports 在 webkit 浏览器上应用 webkit 的 line-clamp 并在其他浏览器中应用淡出。

@supports line-clamp with fade fallback fiddle

@supports line-clamp with 淡入淡出后备小提琴

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Answer 4

回答by Kevin

The link below provides a pure HTML / CSS solution to this problem.

下面的链接为这个问题提供了一个纯 HTML/CSS 解决方案。

Browser support - as stated in the article:

浏览器支持 - 如文章所述：

So far we have tested on Safari 5.0, IE 9 (must be in standards mode), Opera 12 and Firefox 15.
Older browsers will still work quite well, as the meat of the layout is in normal positioning, margin and padding properties. if your platform is older (e.g. Firefox 3.6, IE 8), you can use the method but redo the gradient as a standalone PNG image or DirectX filter.

到目前为止，我们已经在 Safari 5.0、IE 9（必须处于标准模式）、Opera 12 和 Firefox 15 上进行了测试。
较旧的浏览器仍然可以很好地工作，因为布局的主要内容是正常的定位、边距和填充属性。如果您的平台较旧（例如 Firefox 3.6、IE 8），您可以使用该方法但将渐变重做为独立的 PNG 图像或 DirectX 过滤器。

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

the css:

css：

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

the html:

html：

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

the fiddle

在小提琴

(resize browser's window for testing)

（调整浏览器窗口的大小以进行测试）

Answer 5

回答by Jeff

After looking over the W3 spec for text-overflow, I don't think this is possible using only CSS. Ellipsis is a new-ish property, so it probably hasn't received much usage or feedback as of yet.

在查看了text-overflow的W3 规范后，我认为仅使用 CSS 是不可能的。Ellipsis 是一个新的属性，所以它可能还没有收到太多的使用或反馈。

However, this guyappears to have asked a similar (or identical) question, and someone was able to come up with a nice jQuery solution. You can demo the solution here: http://jsfiddle.net/MPkSF/

然而，这家伙似乎问了一个类似（或相同）的问题，有人提出了一个很好的 jQuery 解决方案。您可以在此处演示解决方案：http: //jsfiddle.net/MPkSF/

If javascript is not an option, I think you may be out of luck...

如果 javascript 不是一个选项，我想你可能不走运......

Answer 6

回答by Matt

Just want to add to this question for completeness sake.

为了完整起见，只想补充这个问题。

Opera has non-standard support for this called -o-ellipsis-lastline.
dotdotdotis a great jQuery plugin I can recommend.

Opera 对此称为-o-ellipsis-lastline有非标准支持。
dotdotdot是一个很棒的 jQuery 插件，我可以推荐。

Answer 7

回答by Adam Fraser

Great question... I wish there was an answer, but this is the closest you can get with CSS these days. No ellipsis, but still pretty usable.

好问题...我希望有一个答案，但这是您现在可以通过 CSS 获得的最接近的答案。没有省略号，但仍然非常有用。

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Answer 8

回答by Nikola Lajic

I've found this css (scss) solution that works quite well. On webkit browsers it shows the ellipsis and on other browsers it just truncates the text. Which is fine for my intended use.

我发现这个 css (scss) 解决方案效果很好。在 webkit 浏览器上它显示省略号，而在其他浏览器上它只是截断文本。这对我的预期用途很好。

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

An example by the creator: http://codepen.io/martinwolf/pen/qlFdp

创建者的一个例子：http: //codepen.io/martinwolf/pen/qlFdp

Answer 9

回答by Mr_Green

Here is the closest solution I could get using just css.

这是我只使用 css 可以获得的最接近的解决方案。

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle(resize the window to check)

Answer 10

回答by NilsyNils

There are many answers here but I needed one that was:

这里有很多答案，但我需要一个答案：

CSS Only
Future-proof (gets more compatible with time)
Not going to break words apart (only breaks on spaces)

仅 CSS
面向未来（与时间更兼容）
不会将单词分开（仅在空格处中断）

The caveat is that it doesn't provide an ellipsis for the browsers that don't support the -webkit-line-clamprule (currently IE, Edge, Firefox) but it does use a gradient to fade their text out.

需要注意的是，它没有为不支持该-webkit-line-clamp规则的浏览器（目前是 IE、Edge、Firefox）提供省略号，但它确实使用渐变来淡出它们的文本。

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

You can see it in action in this CodePenand you can also see a Javascript version here(no jQuery).

你可以在这个 CodePen 中看到它的运行，你也可以在这里看到一个Javascript 版本（没有 jQuery）。

Html 使用 CSS，对溢出的多行块使用“...”

提问by Ovilia

采纳答案by Jim Thomas

回答by balpha

回答by Danield

1) -webkit-line-clamp

1) -webkit-line-clamp

2) fade out

2）淡出

Solution #3 - A combination using @supports

解决方案 #3 - 使用@supports的组合

CSS

CSS

回答by Kevin

the css:

css：

the html:

html：

the fiddle

在小提琴

回答by Jeff

回答by Matt

回答by Adam Fraser

回答by Nikola Lajic

回答by Mr_Green

HTML

HTML

CSS

CSS

Working Fiddle(resize the window to check)

工作小提琴（调整窗口大小以检查）

Link to my blog for explanation

链接到我的博客以获取解释

Updated Fiddle

更新的小提琴

回答by NilsyNils

相关推荐

最近更新

标签