Переполнение текста: многоточие не работает

Вот что я пробовал (см. здесь):

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

По существу, я хочу, чтобы диапазон уменьшался с помощью многоточия, когда окно сделалось маленьким. Что я сделал не так?

Ответ 1

Вам нужно иметь CSS overflow, width, display и white-space.

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Приложение Если вы хотите получить обзор методов зажима строк (многострочные эллипсы переполнения), посмотрите эту страницу CSS-хитрости: https://css-tricks.com/line-clampin/

Приложение 2 (май 2019 г.)
Как утверждает эта ссылка, Firefox 68 будет поддерживать -webkit-line-clamp (!)

Ответ 2

Удостоверьтесь, что у вас есть элемент блока, максимальный размер и ограничение переполнения. (Протестировано в IE9 и FF 7)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

Ответ 3

Для нескольких линий в Chrome используйте:

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

Вдохновленный с youtube;-)

Ответ 4

У меня возникла проблема с эллипсисом под хром. Включение белого пространства: nowrap, похоже, исправил это.

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

Ответ 5

word-wrap: break-word;

это и только это сделало работу для меня при a

<pre> </pre>

тег

все еще не удалось выполнить многоточие....

Ответ 6

Добавьте этот код ниже, где вам нравится

Пример

p{
   display: block; /* Fallback for non-webkit */
   display: -webkit-box;
   max-width: 400px;
   margin: 0 auto;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Ответ 7

Просто хэдшоп для тех, кто может наткнуться на это... Мой h2 наследовал

text-rendering: optimizelegibility; 
//Changed to text-rendering: none; for fix

который не допускал многоточия. По-видимому, это очень финиковый ай?

Ответ 8

Вы можете попробовать использовать многоточие, добавив в CSS следующее:

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

Но похоже, что этот код применяется только к однострочной обрезке. Дополнительные способы обрезать текст и показать эллипсис можно найти на этом веб-сайте: http://blog.sanuker.com/?p=631

Ответ 9

Для нескольких строк

В chrome вы можете применить этот css, если вам нужно применить многоточие на нескольких строках.

Вы также можете добавить ширину в свой CSS, чтобы указать элемент определенной ширины:

.multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<p class="multi-line-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Ответ 10

Добавьте следующие строки в CSS для эллипсиса для работы

 p {
     display: block; // change it as per your requirement
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }