Как отобразить некоторые элементы в div, изменяющем ширину

Я хочу отобразить div с заполненными звездами на div с пустыми звездами. В результате я хочу показать заполненные звезды, изменяющие ширину div.

Я пытаюсь объяснить лучше. Если при ширине 100px отображаются 5 заполненных звездочек, я хочу иметь возможность установить ширину 83px и отображать только 4,5 звезды.

Моя проблема в том, что теперь, если я установлю div в 83px, последняя звезда будет плавать под другими звездами. Я хотел бы держать звезды в фиксированном положении и показывать также их части.

Это мой код:

.rating-star {
    font-size: 20px;
    color: green;
}

.vote-container {
    position: relative;
}

.full-stars {
    position: absolute;
}

.vote,
.vote-number {
    color: green;
}

.full-stars {
  display: block;
  height: 18px;
  overflow: hidden;
  width: 83px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="vote-container" id="vote-container_1">
  <span class="full-stars">
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
    <i class="fa rating-star fa-star"></i>
  </span>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
  <i class="fa rating-star fa-star-o"></i>
</div>

Источник

1 ответ

Решение

Вы должны будете добавить только этот код в класс.full-stars.

white-space:nowrap
Источник
Другие вопросы по тегам