Вставьте многоточие () в тег HTML, если содержание слишком велико

У меня есть решение, работающее в FF3, Safari и IE6 + с однострочным и многострочным текстом.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
}

.ellipsis.multiline {
    white-space: normal;
}

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

jquery.ellipsis.js

(function($) {
    $.fn.ellipsis = function()
    {
        return this.each(function()
        {
            var el = $(this);

            if(el.css("overflow") == "hidden")
            {
                var text = el.html();
                var multiline = el.hasClass('multiline');
                var t = $(this.cloneNode(true))
                    .hide()
                    .css('position', 'absolute')
                    .css('overflow', 'visible')
                    .width(multiline ? el.width() : 'auto')
                    .height(multiline ? 'auto' : el.height())
                    ;

                el.after(t);

                function height() { return t.height() > el.height(); };
                function width() { return t.width() > el.width(); };

                var func = multiline ? height : width;

                while (text.length > 0 && func())
                {
                    text = text.substr(0, text.length - 1);
                    t.html(text + "...");
                }

                el.html(t.html());
                t.remove();
            }
        });
    };
})(jQuery);

Следующее единственное решение CSS для усечения текста в одной строке работает со всеми браузерами, перечисленными на https://www.caniuse.com/#search=ellipsis на момент написания, за исключением Firefox 6.0. Обратите внимание, что JavaScript совершенно не нужен, если вам не требуется поддержка переноса многострочного текста или более ранних версий Firefox.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

Если вам нужна поддержка более ранних версий Firefox, ознакомьтесь с моим ответом на этот другой вопрос.

Я создал этот код, используя ряд других сообщений, со следующими улучшениями:

1. Он использует двоичный поиск, чтобы найти нужную длину текста.
2. Он обрабатывает случаи, когда элемент (ы) многоточия изначально скрыт, настраивая одноразовое событие показа, которое повторно запускает код многоточия при первом отображении элемента. Это удобно для представлений основных подробностей или древовидных представлений, где некоторые элементы изначально не отображаются.
3. При желании он добавляет атрибут заголовка с исходным текстом для эффекта наведения.
4. В стиль добавлено display: block, поэтому интервалы работают
5. Вместо трех точек используется символ многоточия.
6. Он автоматически запускает скрипт для чего угодно с классом .ellipsis

CSS:

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        display: block;
}

.ellipsis.multiline {
        white-space: normal;
}

jquery.ellipsis.js

(function ($) {

    // this is a binary search that operates via a function
    // func should return < 0 if it should search smaller values
    // func should return > 0 if it should search larger values
    // func should return = 0 if the exact value is found
    // Note: this function handles multiple matches and will return the last match
    // this returns -1 if no match is found
    function binarySearch(length, func) {
        var low = 0;
        var high = length - 1;
        var best = -1;
        var mid;

        while (low <= high) {
            mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
            var result = func(mid);
            if (result < 0) {
                high = mid - 1;
            } else if (result > 0) {
                low = mid + 1;
            } else {
                best = mid;
                low = mid + 1;
            }
        }

        return best;
    }

    // setup handlers for events for show/hide
    $.each(["show", "toggleClass", "addClass", "removeClass"], function () {

        //get the old function, e.g. $.fn.show   or $.fn.hide
        var oldFn = $.fn[this];
        $.fn[this] = function () {

            // get the items that are currently hidden
            var hidden = this.find(":hidden").add(this.filter(":hidden"));

            // run the original function
            var result = oldFn.apply(this, arguments);

            // for all of the hidden elements that are now visible
            hidden.filter(":visible").each(function () {
                // trigger the show msg
                $(this).triggerHandler("show");
            });

            return result;
        };
    });

    // create the ellipsis function
    // when addTooltip = true, add a title attribute with the original text
    $.fn.ellipsis = function (addTooltip) {

        return this.each(function () {
            var el = $(this);

            if (el.is(":visible")) {

                if (el.css("overflow") === "hidden") {
                    var content = el.html();
                    var multiline = el.hasClass('multiline');
                    var tempElement = $(this.cloneNode(true))
                        .hide()
                        .css('position', 'absolute')
                        .css('overflow', 'visible')
                        .width(multiline ? el.width() : 'auto')
                        .height(multiline ? 'auto' : el.height())
                    ;

                    el.after(tempElement);

                    var tooTallFunc = function () {
                        return tempElement.height() > el.height();
                    };

                    var tooWideFunc = function () {
                        return tempElement.width() > el.width();
                    };

                    var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;

                    // if the element is too long...
                    if (tooLongFunc()) {

                        var tooltipText = null;
                        // if a tooltip was requested...
                        if (addTooltip) {
                            // trim leading/trailing whitespace
                            // and consolidate internal whitespace to a single space
                            tooltipText = $.trim(el.text()).replace(/\s\s+/g, ' ');
                        }

                        var originalContent = content;

                        var createContentFunc = function (i) {
                            content = originalContent.substr(0, i);
                            tempElement.html(content + "…");
                        };

                        var searchFunc = function (i) {
                            createContentFunc(i);
                            if (tooLongFunc()) {
                                return -1;
                            }
                            return 0;
                        };

                        var len = binarySearch(content.length - 1, searchFunc);

                        createContentFunc(len);

                        el.html(tempElement.html());

                        // add the tooltip if appropriate
                        if (tooltipText !== null) {
                            el.attr('title', tooltipText);
                        }
                    }

                    tempElement.remove();
                }
            }
            else {
                // if this isn't visible, then hook up the show event
                el.one('show', function () {
                    $(this).ellipsis(addTooltip);
                });
            }
        });
    };

    // ellipsification for items with an ellipsis
    $(document).ready(function () {
        $('.ellipsis').ellipsis(true);
    });

} (jQuery));

На случай, если вы окажетесь здесь в 2013 году - вот чистый css-подход, который я нашел здесь: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Это работает хорошо.

Мой ответ поддерживает только однострочный текст. Ознакомьтесь с приведенным ниже комментарием gfullam для многострочной вилки, она выглядит многообещающей.

Я несколько раз переписывал код из первого ответа, и думаю, это должен быть самый быстрый.

Сначала он находит «примерную» длину текста, а затем добавляет или удаляет символ, пока ширина не станет правильной.

Логика, которую он использует, показана ниже:

После того, как «приблизительная» длина текста найдена, символы добавляются или удаляются до тех пор, пока не будет достигнута желаемая ширина.

Я уверен, что это требует некоторой настройки, но вот код:

(function ($) {
    $.fn.ellipsis = function () {
        return this.each(function () {
            var el = $(this);

            if (el.css("overflow") == "hidden") {
                var text = el.html().trim();
                var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;
                el.after(t);

                function width() { return t.width() > el.width(); };

                if (width()) {

                    var myElipse = "....";

                    t.html(text);

                    var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;

                    t.html(text.substr(0, suggestedCharLength) + myElipse);

                    var x = 1;
                    if (width()) {
                        while (width()) {
                            t.html(text.substr(0, suggestedCharLength - x) + myElipse);
                            x++;
                        }
                    }
                    else {
                        while (!width()) {
                            t.html(text.substr(0, suggestedCharLength + x) + myElipse);
                            x++;
                        }
                        x--;
                        t.html(text.substr(0, suggestedCharLength + x) + myElipse);
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

Я сделал действительно крутой плагин jQuery для обработки всех разновидностей многоточия в тексте, он называется ThreeDots @ http://tpgblog.com/threedots

Он намного более гибкий, чем подходы CSS, и поддерживает гораздо более продвинутое настраиваемое поведение и взаимодействия.

Наслаждаться.

Более гибкий плагин jQuery, позволяющий сохранить элемент после многоточия (например, кнопку «читать дальше») и обновить onWindowResize. Он также работает с текстом с разметкой:

http://dotdotdot.frebsite.nl

Плагин trunk8 jQuery поддерживает несколько строк и может использовать любой HTML-код, а не только символы многоточия, в качестве суффикса усечения: https://github.com/rviscomi/trunk8

Демо здесь: http://jrvis.com/trunk8/

На самом деле есть довольно простой способ сделать это в CSS используя тот факт, что IE расширяет это за счет нестандартных, а FF поддерживает :after

Вы также можете сделать это в JS, если вы хотите, проверив scrollWidth цели и сравнив ее с шириной ее родителей, но imho это менее надежно.

Изменить: это, по-видимому, более развито, чем я думал. Поддержка CSS3 может скоро появиться, и вы можете попробовать некоторые несовершенные расширения.

• http://www.css3.info/preview/text-overflow/
• http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

Последнее - хорошее чтение.

Недавно я сделал нечто подобное для клиента. Вот версия того, что я для них сделал (пример протестирован во всех последних версиях браузеров на Win Vista). Не идеален по всем параметрам, но может быть легко настроен.

Демо: http://enobrev.info/ellipsis/

Код:

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>            
            google.load("jquery", "1.2.6");
            google.setOnLoadCallback(function() {
                $('.longtext').each(function() {
                    if ($(this).attr('scrollWidth') > $(this).width()) {
                        $more = $('<b class="more">&hellip;</b>');

                        // add it to the dom first, so it will have dimensions
                        $(this).append($more);

                        // now set the position
                        $more.css({
                            top: '-' + $(this).height() + 'px',
                            left: ($(this).attr('offsetWidth') - $more.attr('offsetWidth')) + 'px'
                        });
                    }
                });
            });
        </script>

        <style>
            .longtext {
                height: 20px;
                width: 300px;
                overflow: hidden;
                white-space: nowrap;
                border: 1px solid #f00;
            }

            .more {
                z-index: 10;
                position: relative;
                display: block;
                background-color: #fff;
                width: 18px;
                padding: 0 2px;
            }
        </style>
    </head>
    <body>
        <p class="longtext">This is some really long text.  This is some really long text.  This is some really long text.  This is some really long text.</p>
    </body>
</html>

Ну, одно простое решение, которое не совсем добавляет «...», но предотвращает разрыв ‹h2› на две строки, - это добавить этот бит css:

h2 {
    height:some_height_in_px; /* this is the height of the line */
    overflow:hidden; /* so that the second (or third, fourth, etc.)
                        line is not visible */
}

Я подумал еще немного и придумал это решение: вам нужно обернуть текстовое содержимое вашего тега h2 другим тегом (например, span) (или, альтернативно, обернуть h2s чем-то, что имеет заданную высоту), а затем вы можете использовать этот тип javascript для фильтрации ненужных слов:

var elems = document.getElementById('conainter_of_h2s').
                     getElementsByTagName('h2');

    for ( var i = 0, l = elems.length; i < l; i++) {
        var span = elems.item(i).getElementsByTagName('span')[0];
        if ( span.offsetHeight > elems.item(i).offsetHeight ) {
            var text_arr = span.innerHTML.split(' ');
            for ( var j = text_arr.length - 1; j>0 ; j--) {
                delete text_arr[j];
                span.innerHTML = text_arr.join(' ') + '...';
                if ( span.offsetHeight <= 
                                        elems.item(i).offsetHeight ){
                    break;
                }
            }
        }
    }

Вот еще одно решение для JavaScript. Работает очень хорошо и очень быстро.

https://github.com/dobiatowski/jQuery.FastEllipsis

Протестировано в Chrome, FF, IE на Windows и Mac.

Есть решение для многострочного текста с чистым CSS. Он называется line-clamp, но работает только в браузерах webkit. Однако есть способ имитировать это во всех современных браузерах (во всех более свежих, чем IE8). Кроме того, он будет работать только на сплошном фоне, потому что вам нужно фоновое изображение, чтобы скрыть последние слова последней строки. Вот как это происходит:

Учитывая этот html:

<p class="example" id="example-1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Вот CSS:

p {
    position:relative;
    line-height:1.4em;
    height:4.2em;      /* 3 times the line-height to show 3 lines */
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(ellipsis_bg.png) repeat-y;
}

ellipsis_bg.png - изображение того же цвета, что и ваш фон, оно будет иметь ширину около 100 пикселей и такую ​​же высоту, что и ваша line-height.

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

Ссылка: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php

Многострочный многострочный многострочный текст на чистом CSS для текстового содержимого:

.container{
    position: relative;  /* Essential */
    background-color: #bbb;  /* Essential */
    padding: 20px; /* Arbritrary */
}
.text {
    overflow: hidden;  /* Essential */
    /*text-overflow: ellipsis; Not needed */
    line-height: 16px;  /* Essential */
    max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
    position: absolute;/* Relies on relative container */
    bottom: 20px; /* Matches container padding */
    right: 20px; /* Matches container padding */
    height: 16px; /* Matches line height */
    width: 30px; /* Arbritrary */
    background-color: inherit; /* Essential...or specify a color */
    padding-left: 8px; /* Arbritrary */
}

<div class="container">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
    </div>
    <div class="ellipsis">...</div>
</div>

Пожалуйста, проверьте фрагмент для живого примера.

Это похоже на Alex, но делает это в логарифмическом режиме, а не в линейном режиме, и принимает параметр maxHeight.

jQuery.fn.ellipsis = function(text, maxHeight) {
  var element = $(this);
  var characters = text.length;
  var step = text.length / 2;
  var newText = text;
  while (step > 0) {
    element.html(newText);
    if (element.outerHeight() <= maxHeight) {
      if (text.length == newText.length) {
        step = 0;
      } else {
        characters += step;
        newText = text.substring(0, characters);
      }
    } else {
      characters -= step;
      newText = newText.substring(0, characters);
    }
    step = parseInt(step / 2);
  }
  if (text.length > newText.length) {
    element.html(newText + "...");
    while (element.outerHeight() > maxHeight && newText.length >= 1) {
      newText = newText.substring(0, newText.length - 1);
      element.html(newText + "...");
    }
  }
};

Существует простое решение jQuery от Девона Говетта:

https://gist.github.com/digulla/5796047

Чтобы использовать, просто вызовите многоточие () для объекта jQuery. Например:

$ ("промежуток"). многоточие ();

Я переписал функцию Алекса для использования в библиотеке MooTools. Я немного изменил его на переход по словам, а не добавлял многоточие в середине слова.

Element.implement({
ellipsis: function() {
    if(this.getStyle("overflow") == "hidden") {
        var text = this.get('html');
        var multiline = this.hasClass('multiline');
        var t = this.clone()
            .setStyle('display', 'none')
            .setStyle('position', 'absolute')
            .setStyle('overflow', 'visible')
            .setStyle('width', multiline ? this.getSize().x : 'auto')
            .setStyle('height', multiline ? 'auto' : this.getSize().y)
            .inject(this, 'after');

        function height() { return t.measure(t.getSize).y > this.getSize().y; };
        function width() { return t.measure(t.getSize().x > this.getSize().x; };

        var func = multiline ? height.bind(this) : width.bind(this);

        while (text.length > 0 && func()) {
            text = text.substr(0, text.lastIndexOf(' '));
            t.set('html', text + "...");
        }

        this.set('html', t.get('html'));
        t.dispose();
    }
}
});

Я не смог найти сценарий, который работал бы именно так, как я хотел, поэтому я сделал свой собственный для jQuery - довольно много вариантов, которые можно установить, и еще больше на их пути :)

https://github.com/rmorse/AutoEllipsis

Хотя я был немного удивлен поведением css.

var cssEllipsis = 
{   "width": "100%","display": "inline-block", 
"vertical-align": "middle", "white-space": "nowrap", 
"overflow": "hidden", "text-overflow": "ellipsis" 
};

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

СДЕЛАЙТЕ ЭЛЛИПСИС, ИСПОЛЬЗУЯ ТОЛЬКО CSS

<html>
<head>
<style type="text/css">
#ellipsisdiv {
    width:200px;
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
}  
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>

* Этот код работает в большинстве современных браузеров. Если у вас возникли проблемы с Opera и IE (чего, вероятно, не будет), добавьте их в стиле:

-o-text-overflow: ellipsis;  
-ms-text-overflow: ellipsis;

* Эта функция является частью CSS3. Его полный синтаксис:

text-overflow: clip|ellipsis|string;

Вот хорошая библиотека виджетов / плагинов, в которую встроено многоточие: http://www.codeitbetter.co.uk/widgets/ellipsis/ Все, что вам нужно сделать, это ссылка на библиотеку и вызов следующего:

<script type="text/javascript"> 
   $(document).ready(function () { 
      $(".ellipsis_10").Ellipsis({ 
         numberOfCharacters: 10, 
         showLessText: "less", 
         showMoreText: "more" 
      }); 
   }); 
</script> 
<div class="ellipsis_10"> 
   Some text here that's longer than 10 characters. 
</div>

вы можете сделать это намного проще с помощью только css, например: sass mode

.truncatedText {
   font-size: 0.875em;
   line-height: 1.2em;
   height: 2.4em; // 2 lines * line-height
   &:after {
      content: " ...";
   }
}

а у вас многоточие;)

Как и в случае с @acSlater, я не смог найти то, что мне было нужно, поэтому я сделал свой собственный. Совместное использование, если кто-то еще может использовать:

ellipsisIfNecessary(mystring,maxlength);

trimmedString = ellipsisIfNecessary(mystring,50);