Установить цвет точки "text-overflow: ellipsis"

У меня есть 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>

Ответы

Ответ 1

Если я правильно понимаю вашу проблему, это может сработать для вас:

Демо-скрипт

Если эллипсис принимает цвет div, тогда сделайте div, цвет которого вы хотите использовать многоточие, и используйте .color, чтобы установить начальный текст в черный цвет.

HTML:

<div class="container">
    <div class="text"><span class="color">Lorem</span> ipsum dolor sit amet, consetetur
    </div><!-- works -->
</div>

CSS

.text {
    //current styles 
    color:#b02b7c; 
}

.color {
    color: black;
}