Переполнение текста в 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:leftor 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 и ниже.

Стандарты, на которые ссылаются ниже, определяют поведение этого свойства как зависящее от установки свойства text-wrap. Однако параметры WordWrap всегда эффективны в Windows Internet Explorer, поскольку Internet Explorer не поддерживает свойство «text-wrap».

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

ms информация о свойствах переноса слов

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: left; внутри этого класса #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 это тот, который работает для меня. Обратите внимание, что медиа-запрос, чтобы проверить, является ли браузер 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;