Многоточие не работает

Question

У меня есть следующий код:

.biz-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 600px;
}

<div class="section-segment">
  <span class="biz-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus nisi non tellus pharetra, nec tempus mi fringilla. Vestibulum consequat dolor sit amet orci suscipit, id facilisis metus tempus. Maecenas in massa eget nisl porttitor molestie id ut velit. Nullam quis purus porttitor neque fermentum dignissim quis nec felis. Aenean non maximus quam, sit amet tincidunt sapien. Nam ut gravida libero. Quisque tortor ante, maximus sit amet nunc at, convallis posuere felis. Proin venenatis sit amet metus eu porta.</span>
</div>

Моя идея заключается в том, что описание будет усечено и будет отображать три точки (...), когда текст слишком длинный для экрана.

Это не работает, однако. Я просто получаю длинный текст, который выходит из div граница

Я пытался добавить max-width: 600px; в .biz-desc но безрезультатно.

Может кто-нибудь увидеть в чем проблема или подсказать, как добиться этого скромного требования?

Answer 1

С веб-страницы MDN для переполнения текста (жирный шрифт добавлен для выделения):

Это свойство влияет только на содержимое, которое переполняет элемент контейнера блока в его линейном направлении продвижения

Вам необходимо подать заявку text-overflow к блок-контейнеру, но вы применяете его к встроенному контейнеру (span). Вы можете решить проблему двумя разными способами:

1. Сделать span иметь отображение block/inline-block:

2. Или применить text-overflow к div вместо span

Answer 2

max-width игнорируется inline элементы.

Для этого есть четыре возможных решения:

• либо вы применяете CSS к .section-segment вместо .biz-desc

• или вы добавляете biz-desc класс к <div> (<div class="section-segment biz-desc">)

• или вы добавляете display: block; или же display: inline-block; к правилам CSS

• или вы меняете <span> к элементу уровня блока, как <p> или же <div>,

Answer 3

По моему личному опыту я предлагаю вам просто поставить text-overflow к <div> тег.

Проблема в том, чтобы <span> тег там.

Answer 4

Все, что вам нужно сделать, это изменить класс и свойство max-width следующим образом:

.section-segment{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 600px;
}

Или в качестве альтернативы

.biz-desc{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 600px;
}