如何修改div宽度实现填充星在空星上的部分显示？

我完全懂你的需求——通过上层填充星容器的宽度来控制星级显示（包括半颗星），但现在遇到了宽度不足时最后一颗星换行的麻烦。其实只要调整几个CSS属性就能轻松解决，让星的位置固定，只显示容器宽度内的部分。

核心思路 #

我们需要让填充星容器内的星强制不换行，同时隐藏超出容器宽度的内容，这样不管宽度设为多少，星都会在同一行里被截断，而不是换行到下一行。

完整代码示例 #

<div class="star-rating">
  <!-- 下层空星容器 -->
  <div class="stars empty">★★★★★</div>
  <!-- 上层填充星容器，通过width控制显示数量 -->
  <div class="stars filled" style="width: 83px;">★★★★★</div>
</div>

.star-rating {
  position: relative;
  /* 这里的font-size决定单颗星的宽度，100px显示5颗的话，单颗约20px，所以设font-size:20px */
  font-size: 20px;
}

.stars {
  /* 让星占满容器宽度，保证上下层对齐 */
  display: block;
}

.empty {
  color: #e0e0e0; /* 空星颜色 */
}

.filled {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffd700; /* 填充星颜色 */
  white-space: nowrap; /* 关键：强制星不换行 */
  overflow: hidden; /* 关键：隐藏超出容器宽度的部分 */
}

效果说明 #

• 当filled容器宽度设为100px时，刚好显示5颗完整填充星；
• 设为83px时，星会保持在同一行，只显示前4颗完整星加上第五颗星的部分区域（不会换行）；
• 如果想显示精准的半颗星，只需要把宽度设为90px（4*20 + 10），就能完美展示4.5颗星。

额外优化 #

如果担心字体差异导致单颗星宽度不一致，可以改用背景图片（比如用星图作为背景，通过background-size和width控制显示），但用文字星的方案更轻量易维护。

内容的提问来源于stack exchange，提问作者Danny_DD