HTML中如何在横线中插入文字

创作时间:

作者:

@小白创作中心

HTML中如何在横线中插入文字

引用

来源

https://docs.pingcode.com/baike/3407744

在网页设计中，有时需要在横线中插入文字以达到特定的视觉效果。本文将介绍三种实现方法：使用CSS和伪元素、使用SVG、以及使用HTML和CSS结合的方法。

一、使用CSS和伪元素

使用CSS和伪元素是最常见的方法之一。你可以通过CSS样式中的 ::before 和 ::after 伪元素来插入文字。

1.1 基本实现

首先，创建一个带有文字的横线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .line-with-text {
            display: flex;
            align-items: center;
            text-align: center;
            color: black;
        }
        .line-with-text::before,
        .line-with-text::after {
            content: "";
            flex: 1;
            border-bottom: 1px solid black;
        }
        .line-with-text:not(:empty)::before {
            margin-right: .25em;
        }
        .line-with-text:not(:empty)::after {
            margin-left: .25em;
        }
    </style>
</head>
<body>
    <div class="line-with-text">插入的文字</div>
</body>
</html>

解释：在这里，.line-with-text 是一个包含文字和横线的 div 元素。通过伪元素 ::before 和 ::after 创建横线，并通过 flex 布局实现文字居中。

1.2 自定义样式

你可以进一步自定义样式，例如改变横线颜色、宽度、以及文字样式：

.line-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: blue; /* 修改文字颜色 */
    font-size: 1.5em; /* 修改文字大小 */
}
.line-with-text::before,
.line-with-text::after {
    content: "";
    flex: 1;
    border-bottom: 2px dashed red; /* 修改横线样式 */
}
.line-with-text:not(:empty)::before {
    margin-right: .5em; /* 修改文字与横线的间距 */
}
.line-with-text:not(:empty)::after {
    margin-left: .5em;
}

二、使用SVG

使用SVG（Scalable Vector Graphics）也是一个很好的选择，尤其是在需要高灵活性和复杂图形时：

2.1 基本实现

以下是使用SVG在横线中插入文字的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <svg height="30" width="500">
        <line x1="0" y1="15" x2="200" y2="15" style="stroke:black;stroke-width:1" />
        <text x="210" y="20" fill="black">插入的文字</text>
        <line x1="300" y1="15" x2="500" y2="15" style="stroke:black;stroke-width:1" />
    </svg>
</body>
</html>

解释：使用 <line> 元素绘制横线，<text> 元素插入文字。根据需要调整 x 和 y 属性来定位文字和线条。

2.2 自定义样式

进一步自定义SVG样式，例如改变线条样式和文字样式：

<svg height="30" width="500">
    <line x1="0" y1="15" x2="200" y2="15" style="stroke:blue;stroke-width:2" />
    <text x="210" y="20" fill="green" font-size="18">插入的文字</text>
    <line x1="300" y1="15" x2="500" y2="15" style="stroke:blue;stroke-width:2" />
</svg>

三、使用HTML和CSS结合的方法

另一种方法是使用HTML标签并通过CSS进行样式调整：

3.1 基本实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hr-with-text {
            border: none;
            border-top: 1px solid black;
            text-align: center;
            line-height: 0.1em;
            margin: 10px 0 20px;
        }
        .hr-with-text span {
            background: #fff;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <hr class="hr-with-text"><span>插入的文字</span><hr class="hr-with-text">
</body>
</html>

解释：这里使用 <hr> 标签实现横线，通过CSS的 text-align 属性和 span 标签实现文字插入效果。

3.2 自定义样式

可以进一步自定义样式，例如改变线条颜色和文字背景颜色：

.hr-with-text {
    border: none;
    border-top: 2px dashed red;
    text-align: center;
    line-height: 0.1em;
    margin: 10px 0 20px;
}
.hr-with-text span {
    background: #fff;
    color: blue;
    padding: 0 10px;
    font-size: 1.2em;
}