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

Я не знаю, чому цей простий CSS не працює ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Слід відрізати навколо 4-го "Тесту"

text-overflow:ellipsis; працює лише тоді, коли є правдою наступне:

• Ширина елемента повинна бути обмежена в px(пікселях). Ширина в %(відсотках) не працюватиме.
• Елемент повинен мати overflow:hiddenі white-space:nowrapвстановлювати.

Причина у вас тут є проблеми в тому, що widthваш aелемент не обмежений. У вас є widthналаштування, але оскільки елемент встановлений display:inline(тобто за замовчуванням), він ігнорує його, і більше нічого не обмежує його ширину.

Ви можете виправити це, виконавши одне з наступних дій:

• Встановіть елемент display:inline-blockабо display:block(можливо, колишній, але це залежить від потреб вашого макета).
• Встановіть один із його елементів контейнера display:blockта надайте цьому елементу фіксований widthабо max-width.
• Встановіть елемент float:leftабо float:right(можливо, колишній, але знову ж таки, або має мати такий же ефект, що стосується еліпсису).

Я б запропонував display:inline-block, оскільки це матиме мінімальний побічний вплив на ваш макет; він працює дуже схоже на display:inlineте, що він використовує в даний час, що стосується макета, але сміливо експериментуйте і з іншими моментами; Я намагався дати якомога більше інформації, щоб допомогти вам зрозуміти, як ці речі взаємодіють разом; значна частина розуміння CSS - це розуміння того, як різні стилі працюють разом.

Ось фрагмент із вашим кодом із display:inline-blockдоданим, щоб показати, наскільки ви були близькими.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Корисні посилання:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Прийнята відповідь приголомшлива. Однак ви все одно можете використовувати %ширину і досягти text-overflow: ellipsis. Рішення просте:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

Здається , кожен раз , коли ви використовуєте calc, остаточне значення відображається в абсолютних пікселів, які послідовно перетворює 80%в щось на зразок 800pxдля 1000px-Width контейнера. Тому замість використання width: [YOUR PERCENT]%використовуйте width: calc([YOUR PERCENT]%).

Тож якщо у вас виникне це питання, тому що у вас виникають проблеми, намагаючись змусити еліпсис працювати всередині display: flexконтейнера, спробуйте додати min-width: 0його до найкондитнішого контейнера, який переповнює його батьківський, навіть якщо ви вже встановили overflow: hiddenйого і подивіться, як це працює для вас.

Більш детально та робочий приклад цього коду від aj-foster . Повністю зробив трюк у моєму випадку.

Також переконайтеся , що word-wrapвстановлено в нормальний для IE10 і нижче.

Нижче наведені стандарти визначають поведінку цього властивості як залежне від налаштування властивості "перетворення тексту". Однак налаштування wordWrap завжди ефективні в Windows Internet Explorer, оскільки Internet Explorer не підтримує властивість "обгортання тексту".

Отже, у моєму випадку word-wrapбуло встановлено, що слово розбиття (успадковане чи за замовчуванням?) Спричиняє text-overflowроботу в FF та Chrome, але не в IE.

мс інформація про властивість перенесення слів

anchor, span... теги за замовчуванням є вбудованими елементами , у випадку, якщо widthвластивість вбудованих елементів не працює. Таким чином, ви повинні перетворити свій елемент в один inline-blockабо в block levelелементи

Додайте чотири рядки, написані після інформації для роботи еліпсису

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Додайте display: block;або display: inline-block;до свого#User_Apps_Content .DLD_App a

демонстрація

Ви просто додаєте один рядок css:

.app a {
   display: inline-block;
}

У завантажувальній програмі 4 ви можете додати .text-truncateклас для врізання тексту еліпсисом.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

ОБОВ'ЯЗКОВО містити

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

НЕ МОЖЕ містити

display: inline

ДОЛЖЕН би містити

position: sticky

Ви також можете додати float: зліва; всередині цього класу #User_Apps_Content .DLD_App a

Мені довелося зробити декілька довгих описів еліпса (візьміть лише одну смугу), реагуючи, тому моє рішення полягало в тому, щоб текст міг обгортати (замість white-space: nowrap), а замість фіксованої ширини я додав фіксовану висоту:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Це код, який дозволяє:

overflow: hidden;
text-overflow: ellipsis;

переповнення: приховано потрібно

Я зіткнувся з тим же питанням, і, схоже, жодне з вищезгаданих рішень не працює для Safari. Для браузера, який не є сафарі, це працює чудово:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Для Сафарі це те, що працює для мене. Зауважте, що медіа-запит, щоб перевірити, чи є браузер Safari, може змінитися з часом, тому просто поцікавтеся медіа-запитом, якщо він не працює для вас. З line-clampвластивістю також можна було б мати кілька рядків в Інтернеті з еліпсисом, дивіться тут .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

Не можу коментувати через репутацію, тому я роблю ще одну відповідь:

У цьому випадку вам також доведеться видалити загально запропоновану display: block;властивість із елемента, який ви встановили text-overflow: ellipsis;, або він буде відрізаний без ... наприкінці.

Запишіть це у своєму правилі css.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;