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

Также убедитесь, что 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

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

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

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

    }

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

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80% - 0px); /* killer line hahaha */

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

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

демо

В bootstrap 4 вы можете добавить класс .text-truncate для усечения текста с помощью многоточия.

<script src="/jquery.min.js"></script>
<link href="/bootstrap.min.css" rel="stylesheet" />
<script src="/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>

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

.app a {
   display: inline-block;
}

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

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

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

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

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

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