Как заполнить DIV длинным текстом и отображать эллипсис, если он переполнен

Ответ 1

На данный момент нет удовлетворительного чистого решения CSS. Этот CSS может работать в некоторых ситуациях:

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

Есть несколько JS-решений, которые могут быть более интересными, например. Clamp.js

Вот хорошая статья о разных подходах и CodePen с примерами

Ответ 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 */
}

Идея состоит в том, чтобы на краю многострочного контейнера иметь наложение многоточия или ..., что предполагается, что многоточие должно выполняться. Это не настоящий эллипс, но он служит цели достаточно хорошо и совместим со старыми браузерами.

Ответ 3

См. здесь демонстрацию рабочего кода → jsFiddle Link < <

Это казалось забавным фрагментом, с которым можно было поиграть. Хотя чистое решение 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);

});

Наконец, у меня есть некоторый относительно placeholder 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;
}

Я думаю, что с небольшим количеством tweeking, вы могли бы определить какой-то эффект, который вам может понравиться.