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>

ОТВЕТЫ

Ответ 1

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>

Ответ 2

Принятый ответ потрясающий. Однако вы все равно можете использовать % width и достичь 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]%).

Ответ 3

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

Стандарты, указанные ниже, определяют это поведение свойства как зависящее от настройки свойства "text-wrap". Тем не менее, параметры wordWrap всегда эффективны в Windows Internet Explorer, потому что Internet Explorer не поддерживает свойство "text-wrap".

Следовательно, в моем случае word-wrap был установлен на break-word (унаследованный или по умолчанию?), заставляя text-overflow работать в FF и Chrome, но не в IE.

ms информация об атрибуте word-wrap

Ответ 4

anchor, span... теги встроенные элементы по умолчанию. В случае встроенных элементов свойство width не работает. Таким образом, вы должны преобразовать свой элемент в элементы inline-block или block level

Ответ 5

Включите четыре строки, написанные после информации для работы многоточия

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

Ответ 6

Добавьте display: block; или display: inline-block; в #User_Apps_Content .DLD_App a

демо

Ответ 7

Вы просто добавляете одну строку css:

.app a {
   display: inline-block;
}

Ответ 8

Поэтому, если вы дойдете до этого вопроса из-за проблем с попыткой заставить многоточие работать в контейнере display: flex, попробуйте добавить min-width: 0 к внешнему контейнеру, который переполняет его родителя, даже если вы уже установили overflow: hidden для это и посмотрим, как это работает для вас.

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

Ответ 9

Вы также можете добавить float: left; внутри этого класса #User_Apps_Content.DLD_App a

Ответ 10

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

Ответ 11

Я должен был сделать несколько длинных описаний эллипса (возьмите только одну полосу), будучи отзывчивыми, поэтому мое решение состояло в том, чтобы разрешить перенос текста (вместо 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>

Ответ 12

outlook не поддерживает переполнение текста

Ответ 13

Должен содержать

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

НЕ ДОЛЖЕН содержать

display: inline

ДОЛЖЕН содержать

position: sticky

Ответ 14

Напишите их в своем правиле css.

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