У меня есть div
с фиксированной шириной, которая имеет div
с текстом внутри. Части текста находятся в span
для раскраски. Текст div
имеет все необходимые стили для переполнения текста с точками в конце (многоточие), но точки не наследуют цвет span
, потому что их определение находится на div
. Когда я ставлю определение на span
, он игнорирует ширину своих родителей.
Тестовый код:
.container {
width: 120px;
}
.text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.color {
color: #b02b7c;
}
<div class="container">
<div class="text">Lorem <span class="color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- works -->
<div>Lorem <span class="text color">ipsum dolor sit amet, consetetur</span>
</div>
<!-- doesn't work -->
</div>