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

当前回答

这是最接近的解决方案,我可以得到只用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专家已经知道如何使它完美。:)

其他回答

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

浮动…更多

像这样

检测窗口大小或元素改变

像这样

我一直在尝试,直到我成功地实现了接近这个的东西。但有几点需要注意:

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.

我还应该注意,文本将在单词边界处断开,而不是字符边界处断开。这是有意为之(因为我认为这对较长的文本更好),但因为它不同于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不支持。

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

点击这里查看更多信息

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

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

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

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

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

还有一些性能测试。