Вставте еліпсис (…) у тег HTML, якщо вміст занадто широкий


148

У мене веб-сторінка з еластичним макетом, яка змінює свою ширину, якщо змінити вікно браузера.

У цьому макеті є заголовки ( h2), які матимуть змінну довжину (насправді це заголовки з блогових постів, над якими я не маю контролю). Наразі - якщо вони ширші за вікно - вони розбиваються на два рядки.

Чи є елегантне, перевірене (крос-браузерне) рішення - наприклад, з jQuery - яке скорочує внутрішнійHTML цього тега заголовка і додає "...", якщо текст буде занадто широким, щоб вписатись в один рядок на поточному екрані / ширина контейнера?


1
Оновлена ​​відповідь 2014 року: stackoverflow.com/a/22811590/759452
Adrien Be

Я створив плагін на основі цього потоку, який використовує властивості CSS-пробілу та перенесення слів для форматування тексту. github.com/nothrem/jQuerySmartEllipsis
Radek Pech

Відповіді:


119

У мене є рішення, що працює у 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);

22
Приємно, я дивився, як впоратися з переповненням декількох рядків. Одне вдосконалення: замість додавання трьох періодів додайте символ еліпсису "…".
Саймон Лішке

4
Це працює дуже добре. Ви повинні опублікувати це на сайті jQuery.
Едгар

1
Хоча в IE, якщо функція еліпсису застосовується до діва, який просто має посилання, після еліпсису посилання зникає. Якісь покажчики на це?
Chantz

6
Якщо ви хочете побачити це в дії, ви можете побачити його тут (вибачте за хитре формат на коді плагіна) jsfiddle.net/danesparza/TF6Rb/1
Dan Esparza

22
Для підвищення продуктивності виконайте двійковий пошук замість того, щоб видаляти одночасно 1 символ у циклі "while". Якщо 100% тексту не підходить, спробуйте 50% тексту; то 75% тексту, якщо 50% підходить, або 25%, якщо 50% не підходить тощо.
StanleyH

182

Наведене нижче єдине CSS-рішення для обрізання тексту в одному рядку працює з усіма веб-браузерами, переліченими на веб- сайті http://www.caniuse.com, як написано, за винятком Firefox 6.0. Зауважте, що JavaScript абсолютно непотрібний, якщо вам не потрібно підтримувати обгортання багаторядкового тексту або попередні версії Firefox.

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

Якщо вам потрібна підтримка більш ранніх версій Firefox, перегляньте мою відповідь на це інше питання .


2
Це на порядок швидше, ніж підхід jQuery. Відмінно працює в IE7 + та Chrome.
JDB досі пам’ятає Моніку

3
Це добре працює і в старовинних браузерах. Ми успішно використовували це в Google в 2004 році, де від нас вимагали граціозно підтримувати або деградувати в деяких дійсно браузерах.
ElBel

2
JS Fiddle для тих, хто хоче спробувати його в браузері - jsfiddle.net/r39Ad
Deepak Bala

@DilipRajkumar вам потрібно буде надати більш детальну інформацію, наприклад, приклад JSFiddle, який демонструє, що він не працює в IE 8.
Simon Lieschke

1
@SharpCoder ти цього не робиш. Там, де текст відсікається, продиктовано шириною елемента, що його містить, тобто він скорочує, коли він переповнює ширину елемента.
Simon Lieschke

40

Я створив цей код, використовуючи ряд інших публікацій із такими вдосконаленнями:

  1. Він використовує двійковий пошук, щоб знайти потрібну довжину тексту.
  2. Він обробляє випадки, коли елемент (и) еліпсису спочатку приховано, встановивши однопотоковий показ події, який повторно запускає код еліпсису під час першого відображення елемента. Це зручно для представлення детальних деталей або переглядів дерев, де деякі елементи спочатку не відображаються.
  3. Він необов'язково додає атрибут заголовка з оригінальним текстом для ефекту переміщення.
  4. Додано display: blockдо стилю, тому прольоти працюють
  5. Він використовує символ еліпсису замість 3 періодів.
  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));

2
Гарний. Браво за реалізацію моєї пропозиції щодо двійкового пошуку.
СтенліH

2
Лише коротка примітка ... варто додати .css ("max-width", "none") до var tempElement var ... Таким чином ви можете використовувати декларацію про максимальну ширину у своєму css, що робить плагін набагато гнучкішим (принаймні для більшості випадків використання у мене є). Гарна робота все одно. :)
gordyr

3
Це набагато швидше реалізація, ніж прийнята вище відповідь. Якщо у вас є кілька елементів .ellipsis, і ви робите з ними що-небудь динамічне, цей працює набагато краще.
mjvotaw

Чи можете ви надати приклад? Моє запитання тут: stackoverflow.com/questions/26344520/…
SearchForKnowledge

Бінарний пошук є кращим, але не з дуже невеликими наборами даних, і в цьому випадку він заважає продуктивності порівняно з прямим лінійним пошуком, таким як indexOf () ... мабуть
user1360809

20

Моя відповідь підтримує лише однорядний текст. Перегляньте коментар 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);

3
Ваше рішення може бути не найкращим, але це дуже добре пояснено. І мені подобається такий тип логіки наближення. +1 :)
Flater

2
Я підписав це, щоб додати підтримку текстових областей та багаторядкового (вертикального) еліпсисного відсікання: jsfiddle.net/gfullam/j29z7381 (мені подобається логіка наближення BTW)
gfullam

19

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

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

Це добре працює.


1
FWIW, text-overflowне працює з textareaелементами (станом на 2015 рік). Якщо вам потрібна підтримка, textareaви можете досягти її, змінивши прийняту відповідь або скориставшись цією вилкою .
gfullam

18

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

Це набагато гнучкіше, ніж підходи до CSS, і підтримує набагато більш досконалі, налаштовані поведінки та взаємодії.

Насолоджуйтесь.


8

Більш гнучкий плагін jQuery, який дозволяє вам зберігати елемент після еліпсису (наприклад, кнопку "читати більше") та оновлювати на WindowResize. Він також працює навколо тексту з розміткою:

http://dotdotdot.frebsite.nl


Я просто тестував цей плагін, але не міг змусити його працювати. Trunk8 був для мене кращим вибором.
Гільгерме Гарньє

8

trunk8 jQuery плагін підтримує кілька рядків і може використовувати будь-який html, а не лише символи еліпсису, для суфікса усікання: https://github.com/rviscomi/trunk8

Демонстрація тут: http://jrvis.com/trunk8/


так, але це зараз стародавнє. схоже, що його не підтримують?
користувач2513846

1
Схоже, його активно підтримують - під час написання (березень 2016 року) випуски та PR-програми демонструють недавню активність із залученням автора проекту.
Eliot Sykes

5

Насправді існує досить простий спосіб зробити це в CSS, використовуючи той факт, що IE розширює це за допомогою нестандартних стандартів та підтримки FF:after

Ви також можете зробити це в JS, якщо бажаєте, оглянувши ширину прокрутки цілі та порівнявши її з шириною батьків, але це менш надійно.

Правка: це, мабуть, розвиненіше, ніж я думав. Підтримка CSS3 може незабаром існувати, і ви можете спробувати деякі недосконалі розширення.

Останнє добре читати.


Насправді я віддаю перевагу JS-рішенню - тому що воно лише додає "...", якщо текст ширший, ніж доступний простір.
BlaM

3

Нещодавно я зробив щось подібне для клієнта. Ось версія того, що я зробив для них (приклад, протестований у всіх останніх версіях браузера на 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>

3

Ну, одне просте рішення, яке не зовсім додає "...", але перешкоджає розбиткові <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 іншим тегом (наприклад, прольотом) (або альтернативно обернути 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;
                }
            }
        }
    }

Насправді я думав про те, щоб використовувати це як основу для можливого рішення, але я не маю уявлення, якщо - виходячи з цього - можна було б дізнатися, чи відображається зараз весь текст, чи мені потрібно скоротити його та додати " ... ". Просто відрізати це буде виглядати дивно.
BlaM

3

Ось ще одне рішення JavaScript. Працює дуже добре і дуже швидко.

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

Тестовано на Chrome, FF, IE в Windows та Mac.


Хоча це менш автоматично, я вважав, що це більш точне рішення, ніж відповідь Адама Тегена . Цей сценарій вимагає, щоб максимальна кількість рядків тексту була вказана замість відгадування.
пончик

3

Існує рішення для багаторядкового тексту з чистим css. Це називається line-clamp, але працює лише у веб-браузерах. Однак є спосіб імітувати це у всіх сучасних браузерах (все новіше, ніж 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 пікселів і матиме ту саму висоту, що і ваша висота лінії.

Це не дуже красиво, оскільки текст може бути вирізаний посередині листа, але в деяких випадках може бути корисним.

Довідка: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php


Це приємно, але ви повинні бути впевнені, що ваш текст досить довгий, оскільки цей CSS додасть "...", навіть якщо текст буде досить коротким, щоб вміститись у доступний простір. BTW: таку ж відповідь дав Апопій близько місяця тому;)
BlaM

@BlaM Приблизно те саме. Але я вважаю, що градієнтна хитрість є акуратною, і цей код у CSS замість SASS, тому я вважаю, що варто бути окремою відповіддю.
Jules Colle

3

Чистий 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>

Ознайомтесь з фрагментом наживого прикладу.


2

Це схоже на Алекс, але він робить час журналу замість лінійного та приймає параметр 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 + "...");
    }
  }
};

2

Існує просте рішення jQuery від Девона Говетта :

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

Для використання просто зателефонуйте ellipsis () на об’єкт jQuery. Наприклад:

$ ("span"). еліпсис ();


Я збирався опублікувати те саме посилання. :)
Gumbo

Посилання в цій публікації мертве.
Джастін Таннер

Я додав резервне посилання
BlaM

1

Я переписав функцію Alex для використання в бібліотеці 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();
    }
}
});

1

Я не зміг знайти сценарій, який працював саме так, як я цього хотів, так і зробив своє для jQuery - досить багато варіантів, щоб встановити більше з їх допомогою :)

https://github.com/rmorse/AutoEllipsis


1

Я був трохи здивований поведінкою css, хоча.

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

Якщо я не надав ширину контролю, до якого мені потрібно було прив’язати еліпсис, не підкреслив мою причину. Чи слід додати властивість ширини ??? Будь ласка, викладіть свої думки.


1

Зробіть ЕЛЛІПСІС, ВИКОРИСТОВУЮЧИ ТОЛЬКО 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;

1

Ось приємна бібліотека віджетів / плагінів, в яку вбудований еліпсис: 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>

1

це можна зробити набагато простіше лише за допомогою css, наприклад: sass mode

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

і у вас еліпсис;)


0

Так само, як @acSlater, я не міг знайти щось для того, що мені було потрібно, тому я згорнув своє. Спільний доступ, якщо хтось інший може використовувати:

Спосіб:
ellipsisIfNecessary(mystring,maxlength);
Використання:
trimmedString = ellipsisIfNecessary(mystring,50);
Код і демо-посилання: https://gist.github.com/cemerson/10368014

Два анотації: а) Цей код не перевіряє фактичний розмір елемента HTML. Потрібно вказати задану довжину - яка може бути необхідною функціональністю, але насправді тривіально робити. б) Ви просто додаєте "..." до кінця рядка. Існує знак еліпсису "...", який ви могли / повинні використовувати.
BlaM

Привіт @BlaM - код насправді перевіряє довжину щодо параметра maxlength. Мені це принаймні працює. Це сказало - це просто мій одноразовий для моєї конкретної ситуації. Не соромтеся використовувати будь-яке з перерахованих вище рішень, якщо це не підходить для вашої ситуації.
Крістофер Д. Емерсон

Так, він працює з "довжиною", але не з "шириною" (розмір пікселя).
BlaM

Цікава ідея - сміливо робіть оновлену версію з підтримкою. Мені це зараз не потрібно, але може бути корисним у майбутньому.
Крістофер Д. Емерсон

0
<html>
<head>
    <!-- By Warren E. Downs, copyright 2016.  Based loosely on a single/multiline JQuery using example by Alex,
    but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end,
    and adding marquee option as well.
    Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/
            JQuery version: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
            (by Alex, http://stackoverflow.com/users/71953/alex)
            (Improved with Binary Search as suggested by StanleyH, http://stackoverflow.com/users/475848/stanleyh)
    -->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>

        .single {
            overflow:hidden;
            white-space: nowrap;
            width: 10em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

        .multiline {
            overflow: hidden;
            white-space: wrap;
            width: 10em;
            height: 4.5em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

        .marquee {
            overflow: hidden;
            width: 40em;
            padding: 10px;
            margin: 0 auto;
            border: solid 1px blue;
        }

</style>
    <script>
        var _marqueeNumber=0;
        // mode=start,end,middle
        function clipText(text, len, mode) {
            if(!mode) { mode="end"; }
            else { mode=mode.toLowerCase(); }
            if(mode == "start") { return "&hellip;"+clipText(text,len,"_start"); }
            if(mode == "_start") { return text.substr(text.length - len); }
            if(mode == "middle") { 
                return clipText(text, len/2, "end") + clipText(text, len/2, "_start");
            }
            return text.substr(0, len) + "&hellip;";
        }

        function generateKeyframes(clsName, start, end) {
            var sec=5;
            var totalLen=parseFloat(start)-parseFloat(end);
            if(start.indexOf('em') > -1)      { sec=Math.round(totalLen/3); }
            else if(start.indexOf('px') > -1) { sec=Math.round(totalLen/42); }

            var style = document.createElement('style');
            style.type = 'text/css';
            style.innerHTML = 'body {}';
            document.getElementsByTagName('head')[0].appendChild(style);
            this.stylesheet = document.styleSheets[document.styleSheets.length-1];
            try {
                this.stylesheet.insertRule('.'+clsName+' {\n'+
                    '    animation: '+clsName+' '+sec+'s linear infinite;\n'+
                    '}\n', this.stylesheet.rules.length);
                this.stylesheet.insertRule('.'+clsName+':hover {\n'+
                    '    animation-play-state: paused\n'+
                    '}\n', this.stylesheet.rules.length);
                this.stylesheet.insertRule('@keyframes '+clsName+' {\n'+
                    '    0%   { text-indent: '+start+' }\n'+
                    '    100% { text-indent: '+end+' }\n'+
                    '}', this.stylesheet.rules.length);
            } catch (e) {
                console.log(e.message);
            }
        }

        function addClone(el, multiline, estyle) {
            if(!estyle) { 
                try { estyle=window.getComputedStyle(el); }
                catch(e) { return null; }
            }
            var t = el.cloneNode(true);
            var s=t.style;
            //s.display='none';
            s.visibility='hidden'; // WARNING: Infinite loop if this is not hidden (e.g. while testing)
            s.display='inline-block';
            s.background='black';
            s.color='white';
            s.position='absolute';
            s.left=0;
            s.top=0;
            s.overflow='visible';
            s.width=(multiline ? parseFloat(estyle.width) : 'auto');
            s.height=(multiline ? 'auto' : parseFloat(estyle.height));

            el.parentNode.insertBefore(t, el.nextSibling);

            return t;
        }
        function getTextWidth(el, multiline) {
            var t=addClone(el, multiline);
            if(!t) { return null; }
            var ts=window.getComputedStyle(t);
            var w=ts.width;
            if(multiline) {
                var es=window.getComputedStyle(el);
                var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5;
                w=w+'';
                var unit=''; // Extract unit
                for(var xa=0; xa<w.length; xa++) {
                    var c=w[xa];
                    if(c <= '0' || c >= '9') { unit=w.substr(xa-1); }
                }
                w=parseFloat(w);
                w*=lines; // Multiply by lines
                w+=unit; // Append unit again
            }
            t.parentNode.removeChild(t);
            return w;
        }

        // cls=class of element to ellipsize
        // mode=start,end,middle,marq (scrolling marquee instead of clip)
        function ellipsis(cls, mode) {
            mode=mode.toLowerCase();
            var elems=document.getElementsByClassName(cls);
            for(xa in elems) {
                var el=elems[xa];
                var multiline = el.className ? el.className.indexOf('multiline') > -1 : true;
                if(mode == "marq") {       
                    var w=getTextWidth(el, multiline);
                    if(!w) { continue; }
                    var mCls="dsmarquee"+(_marqueeNumber++);
                    var es=window.getComputedStyle(el);
                    generateKeyframes(mCls,es.width, '-'+w);
                    el.className+=" "+mCls; 
                    continue; 
                }
                if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; }
                var estyle=null;
                try { estyle=window.getComputedStyle(el); }
                catch(e) { continue; }
                if(estyle.overflow == "hidden") {
                    var text = el.innerHTML;
                    var t=addClone(el, multiline, estyle);

                    function height() {
                        var ts=window.getComputedStyle(t);
                        var es=window.getComputedStyle(el);
                        return parseFloat(ts.height) - parseFloat(es.height); 
                    }
                    function width() { 
                        var ts=window.getComputedStyle(t);
                        var es=window.getComputedStyle(el);
                        return parseFloat(ts.width) - parseFloat(es.width); 
                    }

                    var tooLong = multiline ? height : width;

                    var len=text.length;
                    var diff=1;
                    var olen=0;
                    var jump=len/2;
                    while (len > 0) {
                        var diff=tooLong();
                        if(diff > 0) { len-=jump; jump/=2; }
                        else if(diff < 0) { len+=jump; }
                        len=Math.round(len);
                        //alert('len='+len+';olen='+olen+';diff='+diff+';jump='+jump+';t='+JSON.stringify(t.innerHTML));
                        t.innerHTML=clipText(text, len, mode);
                        if(olen == len) { break; }
                        olen=len;
                    }
                    el.innerHTML=t.innerHTML;
                    t.parentNode.removeChild(t);
                }           
                //break;
                t.style.visibility='hidden';
            }
        }

        function testHarness() {
            ellipsis('ellipsis1', 'start'); 
            ellipsis('ellipsis2', 'end'); 
            ellipsis('ellipsis3', 'middle'); 
            ellipsis('marquee', 'marq')
        }
    </script>
    </head>
    <body onload="testHarness()">
    <div class="single ellipsis1" style="float:left">some long text that should be clipped left</div>
    <div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div>
    <div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div>

    <br />

    <p class="single marquee">Windows 8 and Windows RT are focused on your lifeyour friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    &nbsp;

    <br />

    <div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div>

    <div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div>

    <div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div>

    <br />

    <p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your lifeyour friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
    &nbsp;

    </body>
</html>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.