IE8及更新版本的解决方案…

值得注意的问题:

使用背景颜色来掩盖边框可能不是最好的解决方案。如果你有一个复杂的(或未知的)背景颜色(或图像)，掩蔽最终将失败。此外，如果你调整文本大小，你会注意到白色背景色(或任何你设置的颜色)会开始覆盖上面(或下面)的文本。

您也不希望“猜测”各个部分的宽度，因为这会使样式非常不灵活，几乎不可能在内容宽度不断变化的响应式站点上实现。

解决方案:

(View JSFiddle)

使用display属性，而不是用背景色“掩蔽”边框。

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

通过在.group元素上放置font-size属性来调整文本大小。

限制:

没有多行文本。只能单行。 HTML标记不那么优雅 line元素上的Top属性需要是行高的一半。所以，如果行高是1.5em，那么顶部应该是- 0.75 em。这是一个限制，因为它不是自动的，如果您在具有不同行高的元素上应用这些样式，那么您可能需要重新应用您的行高样式。

对我来说，这些限制超过了我在回答大多数实现时开头提到的“问题”。

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

为span设置padding，使文本和行之间有更多的空间。

例如:http://jsfiddle.net/tUGrf/

没有伪元素，没有附加元素。只有一个div:

为了便于控制，我使用了一些CSS变量。

div { --border-height: 2px; --border-color: #000; background: linear-gradient(var(--border-color),var(--border-color)) 0% 50%/ calc(50% - (var(--space) / 2)) var(--border-height), linear-gradient(var(--border-color),var(--border-color)) 100% 50%/ calc(50% - (var(--space) / 2)) var(--border-height); background-repeat:no-repeat; text-align:center; } <div style="--space: 100px">Title</div> <div style="--space: 50px;--border-color: red;--border-height:1px;">Title</div> <div style="--space: 150px;--border-color: green;">Longer Text</div>

但是上面的方法不是动态的。你必须根据文本长度改变——space变量。

我不太确定，但您可以尝试使用水平规则，并将文本推到其上边距之上。你还需要一个固定宽度的段落标签和背景。这有点粗糙，我不知道它是否适用于所有浏览器，你需要根据字体大小设置负边距。虽然chrome的工作。

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

横线和竖线，中间有字

.box{ background-image: url("https://i.stack.imgur.com/N39wV.jpg"); width: 350px; padding: 10px; } /*begin first box*/ .first{ width: 300px; height: 100px; margin: 10px; border-width: 0 2px 0 2px; border-color: red; border-style: solid; position: relative; } .first span { position: absolute; display: flex; right: 0; left: 0; align-items: center; } .first .foo{ top: -8px; } .first .bar{ bottom: -8.5px; } .first span:before{ margin-right: 15px; } .first span:after { margin-left: 15px; } .first span:before , .first span:after { content: ' '; height: 2px; background: red; display: block; width: 50%; } /*begin second box*/ .second{ width: 300px; height: 100px; margin: 10px; border-width: 2px 0 2px 0; border-color: red; border-style: solid; position: relative; } .second span { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; } .second .foo{ left: -15px; } .second .bar{ right: -15.5px; } .second span:before{ margin-bottom: 15px; } .second span:after { margin-top: 15px; } .second span:before , .second span:after { content: ' '; width: 2px; background: red; display: block; height: 50%; } <div class="box"> <div class="first"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> <br> <div class="second"> <span class="foo">FOO</span> <span class="bar">BAR</span> </div> </div>

这个问题也在https://stackoverflow.com/a/57279326/6569224得到了回答

编辑(09/2020)

显示:flex方法似乎是当今最可靠、最容易设置的方法。

写于3月17 '15 17:06:

对于后来(现在)的浏览器，display:flex和伪元素使得无需额外标记即可轻松绘制。

如果你需要花哨或难看的妆容，边框风格，盒影甚至背景也有助于化妆。 h1 {margin-top: 50 px; 显示:flex; 背景:线性渐变(向左、灰色、浅灰色,白色,黄色,绿色);; ｝ H1:前，H1:后{ 颜色:白色; 内容:”; flex: 1; 边界底部:槽2 px; 保证金:汽车0.25 em; /* ou 0 1px si border-style:ridge */ ｝ <h1>侧线通过flex</h1>

资源(2020年9月新增):

https://css-tricks.com/snippets/css/a-guide-to-flexbox/(参见这里使用的flex/flex-grow) https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ (margin:auto 0.25em;此处使用)