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

在此处查看我的工作代码演示＆gt;＆gt; jsFiddle Link ＆lt;＆lt;

这似乎是一个有趣的片段。虽然一个纯粹的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;
}

我认为通过一些推文，您可能能够识别出您可能喜欢的效果。

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

3 个答案: