There is a text for example:

Very long text

How to reduce its length, if the text does not fit on one line inside the diva, so that the excess is replaced by "..."? For example, to become this type:

Very long ...

    2 answers 2

    Using javascript by trimming characters.

    var text = "Очень длинный текст. Прям очень очень длинный"; var croppedText = text.substring(0, 15) + "..."; alert(croppedText);

    Where 15 is the number of characters. Result : Very long t ...

    Using Javascript . No loss of words.

      function truncate(n, useWordBoundary) { var isTooLong = this.length > n, s_ = isTooLong ? this.substr(0, n - 1) : this; s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_; return isTooLong ? s_ + '...' : s_; }; var s = 'Очень длинный текст. Прям очень очень длинный'; alert(truncate.apply(s, [15, true]));

    Where 15 is the number of characters. Result : Very long ...

    Using CSS

     .truncate { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
     <div class="truncate"> Очень длинный текст. Прям очень очень длинный </div>

    Cut to the width of the block. Result : Very long ...

    Ps . As a second example, the code was taken: From here . Successful coding ...

      Example from http://htmlbook.ru/css/text-overflow

       p.clip { max-width:150px; white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden; /* Обрезаем все, что не помещается в область */ background: #fc0; /* Цвет фона */ padding: 5px; /* Поля вокруг текста */ text-overflow: ellipsis; /* Добавляем многоточие */ } 
       <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow</title> </head> <body> <p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы, в таком случае эксцентриситеты и наклоны орбит возрастают.</p> </body> </html>