переповнення тексту: еліпсис не працює

Це те, що я спробував (див. Тут ):

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

Для декількох рядків

У хромі ви можете застосувати цей 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;
}