it-swarm.com.ru

Переполнение текста в 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-го "Теста"

279
ChristopherStrydom

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>

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

722
Spudley

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

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

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

ms информация о свойстве Word-wrap

7
Tim Vermaelen

Принятый ответ потрясающий. Однако вы все равно можете использовать % width и получить text-overflow: Ellipsis. Решение простое:

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

Кажется, всякий раз, когда вы используете calc, окончательное значение отображается в абсолютных пикселях, что последовательно преобразует 80% - 0px во что-то вроде 800px для контейнера 1000px-width. Поэтому вместо использования width: [YOUR PERCENT]% используйте width: calc([YOUR PERCENT]% - 0px).

7
Trouble Zero

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

5
santhoshkumar

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

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

        /* 
           **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;

    }
3
Manoj Selvin

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

демо

2
Bhojendra Rauniyar

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

.app a {
   display: inline-block;
}
1
Sanjib Debnath

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

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

1
Herick

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

0
Shabbir Lakdawala

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

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

0
Yi-Ting Liu

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

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

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

display: inline

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

position: sticky
0
Cryptopat