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

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

body {
    overflow: hidden;
}

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

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

Вы должны иметь CSS overflow, width(или max-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(!)

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

http://jsfiddle.net/uh9zD/

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

Для многострочных в 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 ;-)

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

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;

word-wrap: break-word;

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

<pre> </pre> 

тег

многим не удалось сделать многоточие ....

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

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

который не позволял многоточию. Видимо это очень изящно, а?

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

пример

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;
 }

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

В 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>

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

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

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

Добавьте следующие строки в CSS для работы с многоточием

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

Для тех из нас, кто не хочет использовать фиксированную ширину , он также работает с использованием display: inline-grid. Таким образом, наряду с необходимыми свойствами вы просто добавляетеdisplay

span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-grid;
}