如何使文本水平拉伸以填充 Div 的宽度？

水平拉伸文本以适合 Div 宽度

在 Web 开发中，通常需要水平扩展文本以填充特定的 div宽度。但是，默认情况下，文本不会拉伸以占据额外的空间。

解决方案：文本对齐和内联元素

要实现此效果，我们可以利用 CSS 文本-align:justify 以及一个小技巧：

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 中的文本并添加宽度跨越整个 div 的空 span 元素，我们强制文本水平拉伸以填充可用空间。

此技术可确保文本始终完美填充 div，无论其长度如何，从而创建视觉效果吸引人的布局。

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