如何用长文本填充 DIV 并在溢出时显示省略号

Question

我有以下 JSFiddle：http://jsfiddle.net/ofrj55j4/21/

如何在显示省略号之前在 DIV 中显示尽可能多的文本（现在它只显示一行）？

HTML：

<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>



<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>



<div class="col span_1_of_3" style="height: 120px;">
    <div class="test2n" style="height: 100%;">
        <div class="main">
            <img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="http://i59.tinypic.com/23hvrc2.png" />
        </div>
        <div class="sub">
            <div class="sl"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div class="sr">This DIV will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>
        </div>
    </div>
</div>

Answer 1

目前还没有令人满意的纯 CSS 解决方案。这个 CSS 可以在某些情况下工作：

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

有一些 JS 解决方案可能更有趣，例如Clamp.js

这是一个很好的article，关于不同的方法和一个带有examples的CodePen

Answer 2

你可以模拟它。

演示 http://jsfiddle.net/ofrj55j4/24/

.sr {
    position: relative; /* add this to .sr */
}
.sr:after {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    content: "...";
    background: inherit; /* so the background is the same as the container */
}

这个想法是在省略号应该发生的多行容器的边缘覆盖省略号或...。这不是真正的省略号，但足以达到目的，并且与旧版浏览器兼容。

Answer 3

在这里查看我的工作代码演示 >> jsFiddle Link

这似乎是一个有趣的 sn-p 玩。虽然纯 css 解决方案不容易识别（至少我是这样），但这是我想出的一个 js 解决方案......

首先在你的单元格中添加一些 js 挂钩（我使用了 'jsDynamicOverflow'）

<div class="arbitrary-background">
    <div class="arbitrary-container">
        <div class="arbitrary-row cf">
            <div class="arbitrary-cell">
                The quick brown fox jumped over the lazy dog.
            </div>
            <div class="arbitrary-cell jsDynamicOverflow">
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
                The quick brown fox jumped over the lazy dog.
            </div>
        </div>
    </div>
</div>

然后，对于其中的每一个，创建一个具有背景颜色的最近父级的背景颜色渐变的子级。在调整窗口大小时，查看是否需要省略号。如果单击省略号，则显示单元格的其余部分（或补间）。

var $window = $(window);
var $jsDynamicOverflow = $('.jsDynamicOverflow');

$jsDynamicOverflow.each(function() {
    var _this = this;
    var $this = $(this);
    var backgroundColor = false;
    var $bgTarget = $this;

    // determine background-color
    while (!backgroundColor) {
        var sThisBgColor = $bgTarget.css('background-color');
        var bIsTransparent = sThisBgColor == 'rgba(0, 0, 0, 0)';
        backgroundColor = !bIsTransparent ? sThisBgColor : backgroundColor;
        if (($bgTarget.is('html')) && !backgroundColor) {
            backgroundColor = '#FFFFFF';
        }
        else {
            $bgTarget = $bgTarget.parent();
        }
    }

    // dynamic ellipsis

    var sGradientStyle = 'background: -webkit-linear-gradient(left,rgba(0,0,0,0),'+backgroundColor+' 40%);background: -o-linear-gradient(right,rgba(0,0,0,0),'+backgroundColor+' 40%);background: -moz-linear-gradient(right,rgba(0,0,0,0),'+backgroundColor+' 40%);background: linear-gradient(to right, rgba(0,0,0,0), '+backgroundColor+' 40%);';

    var $span = $('<span class="jsEllipsis" style="'+sGradientStyle+'">&#133;</span>');
    $span.appendTo($this);

    var fWindowResize = function() {
        // determine if ellipsis should be visible
        var bShowEllipsis = (_this.offsetHeight < _this.scrollHeight || _this.offsetWidth < _this.scrollWidth);

        $this.toggleClass('jsHasEllipsis', bShowEllipsis);
    };

    var fShowOverflow = function() {
        var iHeight = $this.height();
        var iDelta = _this.scrollHeight - _this.offsetHeight;
        //$this.height(iHeight + iDelta);
        $this.removeClass('jsHasEllipsis');
        // OR
        $this.css('height', 'auto');
    };

    // wire events
    $window.resize(fWindowResize);    

    // initial state
    fWindowResize();
    $span.click(fShowOverflow);

});

最后，我有一些相对占位符的css来演示溢出：

.arbitrary-background {
    background-color: #00FF00;
}
.arbitrary-container {

}
.arbitrary-row {

}
.arbitrary-cell {
    float: left;
    width: 50%;
    overflow: hidden;
    height: 100px;
}

.jsHasEllipsis {
    position: relative;
}
.jsEllipsis {
    display: none;
    position: absolute;
    bottom: 0px;
    right: 0px;
    line-height: inherit;
    font-size: inherit;
    /*background-color: #00FF00;*/
    padding-left: 10px;
    cursor: pointer;
}
.jsHasEllipsis>.jsEllipsis {
    display: inline-block;
}


/* clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

我认为稍微调整一下，您可能能够识别出一些您可能喜欢的效果。