with

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

当前回答

也有几个jquery插件处理这个问题,但许多不处理多行文本。以下工作:

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

还有一些性能测试。

其他回答

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

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

然而,这家伙似乎问了一个类似(或相同)的问题,有人能够提出一个很好的jQuery解决方案。您可以在这里演示解决方案:http://jsfiddle.net/MPkSF/

如果javascript不是一个选择,我认为你可能不走运…

Javascript解决方案将更好

获取文本的行数 如果窗口调整大小或元素更改,则切换is-省略号类

getRowRects

getclientrects()是这样工作的

同一行中的每个矩形都有相同的顶部值,所以找出顶部值不同的矩形,就像这样

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

浮动…更多

像这样

检测窗口大小或元素改变

像这样

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

点击这里查看更多信息

为了完整起见,我想补充一下这个问题。

Opera有一个叫做-o- elliposis -lastline的非标准支持。 dotdotdot是一个很棒的jQuery插件。