Почему после добавления блоков текст становится без троеточий?

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2023

Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался:

#SPAN_4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

но если я добавлю DIV_2 и DIV_3 (как в примере, они заданы с display: flex), то стили для сокращения текста уже не применяются. То есть, если сейчас убрать эти обертки, то он заработает, но потенциально они нужны для дополнительного контента и адаптивного верстке. Почему они так влияют и как это можно исправить?

#DIV_1 {
  align-items: center;
  display: flex; 
  flex: 1 1 0%;
}

#DIV_2 {
  align-items: center;
  display: flex;
}

#DIV_3 {
  transition: transform 0.15s ease-out 0s, -webkit-transform 0.15s ease-out 0s;
}


#SPAN_4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#SPAN_5 {
  font-weight: bold
}
<div id="DIV_1">
    <div id="DIV_2">
        <div id="DIV_3">
            <span id="SPAN_4">dfjgddsasddsadsadsadsdsaadsadsadsakfghdkfgh</span><span id="SPAN_5">test</span>
        </div>
    </div>
    <div id="DIV_6">
        <div id="DIV_7">
        </div>
    </div>
</div>

css html вёрстка адаптивная-верстка flexbox
Источник: Stack Overflow на русском

Ответы

▲ 0

Почему так влияют - потому что вы задаете flex єлемент без переноса на другую строку, потому что строчные элементы занимают заданый объем текста. Оббертка стилями не там.

#DIV_1 {
  align-items: center;
  display: flex;
  flex: 1 1 0%;
}

#DIV_2 {
  align-items: center;
  display: flex;
}

#DIV_3 {
    transition: transform 0.15s ease-out 0s, -webkit-transform 0.15s ease-out 0s;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100vw - 20px);
    padding-right:10px;
}


#SPAN_5 {
  font-weight: bold
}
<div id="DIV_1">
  <div id="DIV_2">
    <div id="DIV_3">
      <span id="SPAN_4">dfjgddsasddsadsadsadsdsaadsadsadsakfghdkfgh</span><span id="SPAN_5">test</span>
    </div>
  </div>
  <div id="DIV_6">
    <div id="DIV_7">
    </div>
  </div>
</div>