实现水平线内嵌文字效果的 CSS 技巧

本文介绍了如何使用 CSS 实现水平线内嵌文字的效果，重点在于利用 border-bottom 属性创建水平线，并结合 background-color、padding、transform 和 display: inline-block 等属性，使文字能够自然地嵌入到水平线中，且文字大小可灵活调整。

要实现水平线内嵌文字的效果，可以使用以下方法。核心思想是利用 border-bottom 属性为容器创建水平线，然后使用 inline-block 元素包裹文字，并调整其位置和背景色，使其看起来像是嵌入在水平线中。

实现步骤：

1. 创建水平线： 使用 border-bottom 属性为父元素（例如 div）添加底边框，模拟水平线。
2. 包裹文字： 使用 span 或其他 inline-block 元素将文字包裹起来。
3. 设置文字样式：
   • 设置 background-color 为与页面背景相同的颜色，遮盖水平线在文字区域的部分。
   • 使用 padding 属性在文字周围添加空白。
   • 使用 transform: translateY(-50%) 垂直居中文字。
   • 设置 display: inline-block 使元素能够同时拥有块级元素的宽度和行内元素的特性，以便进行精确的位置控制。

示例代码：

立即学习“前端免费学习笔记（深入）”；

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

.ruler {
  border-bottom: 1px solid black; /* 设置水平线 */
  text-align: center; /* 文字居中（可选） */
  height: 0px; /* 防止父元素高度影响文字位置 */
}

.text {
  background-color: white; /* 设置背景色，遮盖水平线 */
  padding: 0px 2px; /* 添加文字周围的空白 */
  transform: translateY(-50%); /* 垂直居中文字 */
  display: inline-block; /* 使元素具有块级元素的特性 */
  font-weight: 500; /* 设置字体粗细（可选） */
  font-size: 16px; /* 设置字体大小（可选） */
}

<div class="ruler">
  <span class="text">MyText</span>
</div>

<br />

<div class="ruler">
  <span class="text">MyText</span>
</div>

代码解释：

• .ruler 类用于创建水平线。border-bottom: 1px solid black; 定义了水平线的样式，text-align: center; 可选地将文字居中显示。height: 0px; 避免父元素本身高度对文字位置产生影响。
• .text 类用于设置文字的样式。background-color: white; 确保文字的背景色与页面背景色一致，从而遮盖水平线。padding: 0px 2px; 在文字两侧添加一些空白，使其与水平线之间有一定的间距。transform: translateY(-50%); 将文字垂直居中，使其看起来像是嵌入在水平线中。display: inline-block; 使得元素能够像行内元素一样排列，同时又可以设置宽度和高度。font-size 用于调整文字的大小。

注意事项：

• background-color 的值必须与页面背景色一致，否则会看到水平线在文字后面显现。
• padding 的值可以根据需要进行调整，以控制文字与水平线之间的距离。
• font-size 可以根据需要调整文字的大小。
• transform: translateY(-50%); 是实现垂直居中的关键，但需要确保父元素的高度不会影响文字的位置。

总结：

通过结合 border-bottom、background-color、padding、transform 和 display: inline-block 等 CSS 属性，可以轻松实现水平线内嵌文字的效果。 这种方法简单易懂，并且可以灵活地调整文字的大小和位置，适用于各种网页设计场景。

以上就是实现水平线内嵌文字效果的 CSS 技巧的详细内容，更多请关注php中文网其它相关文章！