本文介绍了如何使用 CSS 实现水平线内嵌文字的效果，重点在于利用 border-bottom 属性创建水平线，并结合 background-color、padding、transform 和 display: inline-block 等属性，使文字能够自然地嵌入到水平线中，且文字大小可灵活调整。
要实现水平线内嵌文字的效果，可以使用以下方法。核心思想是利用 border-bottom 属性为容器创建水平线，然后使用 inline-block 元素包裹文字，并调整其位置和背景色，使其看起来像是嵌入在水平线中。
实现步骤：
- 创建水平线： 使用 border-bottom 属性为父元素（例如 div）添加底边框，模拟水平线。
- 包裹文字： 使用 span 或其他 inline-block 元素将文字包裹起来。
-
设置文字样式：
- 设置 background-color 为与页面背景相同的颜色，遮盖水平线在文字区域的部分。
- 使用 padding 属性在文字周围添加空白。
- 使用 transform: translateY(-50%) 垂直居中文字。
- 设置 display: inline-block 使元素能够同时拥有块级元素的宽度和行内元素的特性，以便进行精确的位置控制。
示例代码：
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板
下载
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
.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 属性，可以轻松实现水平线内嵌文字的效果。 这种方法简单易懂，并且可以灵活地调整文字的大小和位置，适用于各种网页设计场景。
