Переполнение текста в CSS: многоточие; не работает?


368

Я не знаю, почему этот простой 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-го "Теста"




FF only- если filterприменяется, многоточие не будет отображаться. ошибка открыта
vsync

1
Я написал пост о решении проблем с помощью text-overflow: brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Фаусто, NA

1
в моем случае удаление display: flex из элемента помогло
Эдуард

Ответы:


909

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>

Полезные ссылки:


12
Что делать, если я не могу использовать заданную ширину из-за адаптивного дизайна?
SearchForKnowledge

5
Обратите внимание, что max-width также работает. Это помогло мне, потому что у меня был значок, который должен был обнять конец текста независимо от ширины его диапазона. (В противном случае значок будет выплывать вправо, если текст не будет занимать всю ширину пролета)
Кевин,

2
Примечание: white-space: nowrapна самом деле не нужно. Мы все еще можем видеть эллипсы даже без него. Для нескольких линий text-overflow, см это SO
gfaceless

24
Не уверен, является ли это недавним изменением или нет, но в Chrome 50 (бета) вам не нужно устанавливать ширину в значение px - «100%» также работает. white-space: nowrapтребуется, хотя.
thoan

13
Вам не нужно устанавливать фиксированное значение widthвообще. Все, что вам нужно сделать, это установить, white-space: nowrap;и он работает просто отлично.
adamj

37

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


17

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

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


2
Отличное решение - это также единственное опубликованное здесь, которое работает для position: stickyэлемента в display: flexконтейнере.
Джеймс Динсдейл

2
Я думаю, что это должно быть включено в выбранный ответ. Это решило мою проблему. Спасибо!
j0nd0n7

1
Вы, сэр, гений.
Натан Осман

1
спасибо человек, спас день
Зонт

7

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

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

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

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


5

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



1

В начальной загрузке 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>


1

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

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

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

display: inline

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

position: sticky


0

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



0

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

0

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

Не могу комментировать из-за репутации, поэтому я делаю другой ответ:

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


-1

Запишите это в вашем правиле CSS.

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

Вы также можете просмотреть это, jsfiddle.net/ManiAnand/5v6pfy9w
Мани Аби Ананд,

Если ширина может быть указана, мой ответ не будет ошибочным. Все, что вы только что добавили в мой ответ блок отображения, я написал фрагмент, а не целые коды, так что можно добавить и другие вещи, но они не имеют никакого отношения к проблеме !! Можете ли вы указать, как мой ответ не является правильным?
Сирадж Алам

1
Ширина должна быть указана так же, как и дисплей. Если ширина указана в процентах или не указана и не установлена ​​в жестких единицах, переполнение не будет ограничено и не будет работать. Смотрите принятый ответ.
Jlesse

Ширина уже установлена ​​оп. Я дал фрагмент, чтобы добавить в его коды
Сирадж Алам
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.