使用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

还有几个jquery插件可以解决这个问题,但是很多插件不能处理多行文本.以下作品:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

还有一些性能测试.

Answer 2

我已经破解了,直到我成功实现了这一目标.它附带了一些警告:

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

Answer 3

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

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

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

两种方法都采用以下标记:

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

用css

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

1)-webkit-line-clamp

线夹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)淡出

假设您将行高设置为1.2em.如果我们想要暴露三行文本,我们可以使容器的高度为3.6em(1.2em×3).隐藏的溢出将隐藏其余部分.

淡出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%);
}

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

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

@supports line-clamp with fade fallback fiddle

<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

下面的链接为此问题提供了纯HTML/CSS解决方案.

浏览器支持 - 如文章中所述:

到目前为止,我们已经在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

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: "\02026";  

    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); }

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>

在小提琴

(调整浏览器的窗口以进行测试)

Answer 5

在查看了文本溢出的W3规范之后,我认为只使用CSS是不可能的.省略号是一个新兴的属性,因此它可能还没有得到太多的使用或反馈.

然而,这个人似乎已经问过类似(或相同)的问题,并且有人能够提出一个不错的jQuery解决方案.你可以在这里演示解决方案:http://jsfiddle.net/MPkSF/

如果javascript不是一个选项,我想你可能运气不好...

Answer 6

只是想为了完整性而添加到这个问题.

• Opera对这个名为-o-ellipsis-lastline的非标准支持.
• dotdotdot是一个很棒的jQuery插件我可以推荐.

Answer 7

很棒的问题......我希望有一个答案,但这是你现在最接近CSS的答案.没有省略号,但仍然可用.

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

Answer 8

我发现这个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;
}

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

Answer 9

这是我用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;
}

工作小提琴(调整窗口大小以检查)

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

更新小提琴

我希望现在一些css专家能够了解如何使其完美.:)

Answer 10

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

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

需要注意的是，它没有为不支持该-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>

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