如何使用 CSS 拉伸文本以填充 Div 的宽度？

拉伸文本以占据 Div 宽度

在您的 div 保持一致的宽度但可以包含可变数量的文本的情况下，挑战出现了：如何分配字母间距以最佳地填充 div？

幸运的是，这个通过 CSS 属性的战略组合和巧妙的技巧，这一壮举是可能实现的。

解决方案：

1. 应用 text-align:justify;到 div： 这确保文本在分配空间的左侧和右侧均匀对齐。
2. 合并一个 span 元素： 在 div 旁边实现一个 span 标签，并使用内联块显示将其宽度设置为 100%，高度设置为 1em。这将充当文本底部的“间隔符”。

示例代码：

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

此策略强制文本扩展 div 的宽度，同时保留字母间距，创造视觉平衡的效果。

以上是如何使用 CSS 拉伸文本以填充 Div 的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！