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

Susan Sarandon

发布： 2024-11-23 16:49:15

原创

370 人浏览过

How Can I Make Text Stretch Horizontally to Fill a Div's Width?

水平拉伸文本以适合 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中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章