我正在尝试设计一个可重复使用的内容分隔符，其中间有文本。文本将动态传递，因此长度会有所不同。
这个想法是这样的：
----------------------- MAIN SECTION -----------------------
Lorem ipsum dolor sit amet, sed no etiam nonumes.
Eam ea prima mandamus senserit, etiam nonumes ad pro.
------------------- ANOTHER SECTION MORE -------------------
Aliquid platonem nam an, nihil volumus menandri sed ex.
Eum malis imperdiet no, paulo decore vituperata te vis,
sed cu nisl scripta. Meliore efficiantur te mei,
his ne vivendo accusata.
------------------------ CONTACT US ------------------------
Nostro salutatus quo ea, duo ex denique conceptam.
Ad sea zril iuvaret, ex mei cetero facilisis voluptatum.
Duo nonumy facilis ne, ius nisl aperiri inermis ea.
如您所见，这些可重用的组件在网页上分离（和标记）内容。
这是一个 CodePen Demo 的想法。
到目前为止，我一直将分隔符水平分成3列。虚线的宽度为5/12，文字的宽度为1/12。
问题：
1/12的文字列宽对于较长的文字而言太小，尤其是在较小的屏幕宽度上
这让我相信专栏方法不会起作用。
我尝试在分隔符容器上应用display: table并给每列display: table-cell，但我也没有成功。
我需要支持IE9 +。因此，我无法可靠地使用flexbox。我需要一种IE安全的方法。
我感谢你的帮助，如果我愿意澄清任何事情，以防我完全清楚。
谢谢。
答案 0 :(得分：2)
你所拥有的不是分隔符，你有标题，所以要确保你的标记是语义的：
<h1>Main Section</h1>
从那里你希望你的文本以整个宽度的1/6为中心，这很容易用填充。 1/6是宽度的16.667%，这使得5/6在每一侧都有填充，每边留下5/12，这是41.667%填充：
h1 {
padding: 0 41.667%;
}
当然，您还希望文本实际上位于该区域的中心位置，因此请使用text-align：
h1 {
padding: 0 41.667%;
text-align: center;
}
现在对于困难部分，您希望虚线位于文本的背景中，但也保持在线条的中心。您可以使用background-position将图像居中，并使用repeat-x确保它不会垂直重复：
h1 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/355833/pattern-dots.svg");
background-position: center;
background-repeat: repeat-x;
padding: 0 41.667%;
text-align: center;
}<h1>Main Section</h1>
到目前为止一直很好，除了现在我们需要从图像中心排除点。诀窍是将另一个 background-image添加到标题中。我们希望在虚线背景图像上叠加适当大小的白色背景，因此我们必须首先列出叠加背景图像 。
对于此示例，我将使用使用linear-gradient生成的图像，但是对于IE9支持，您需要使用白色像素或data: URI的图像一个白色的SVG。
h1 {
background-image:
linear-gradient(to right, white 0%, white 100%),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/355833/pattern-dots.svg");
background-position: center;
background-repeat: repeat-x;
padding: 0 41.667%;
text-align: center;
}
现在的问题是白色背景图像仍然在点缀的背景上重复。您可以将no-repeat添加到background-repeat参数：
h1 {
background-image:
linear-gradient(to right, white 0%, white 100%),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/355833/pattern-dots.svg");
background-position: center;
background-repeat:
no-repeat,
repeat-x;
padding: 0 41.667%;
text-align: center;
}
要解决的最后一个问题是白色背景仍然太大，因为linear-gradient填满了节点的整个背景。如果使用单个像素背景图像，则它太小。我们可以使用background-size来修复白色背景的大小。
我们希望它与填充之间的差距一样宽，前面是16.667%，我们希望它是节点高度的100%：
h1 {
background-image:
linear-gradient(to right, white 0%, white 100%),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/355833/pattern-dots.svg");
background-position: center;
background-repeat:
no-repeat,
repeat-x;
background-size:
16.667% 100%,
auto;
padding: 0 41.667%;
text-align: center;
}<h1>Main Section</h1>
如果您想在文字和点缀背景之间添加一些装订线，您可以将白色背景的宽度放大一个百分比，或者使用calc(16.667% + 10px) {{{} 1}}是文本两侧所需空间的两倍。
10pxh1 {
background-image:
linear-gradient(to right, white 0%, white 100%),
url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/355833/pattern-dots.svg");
background-position: center;
background-repeat:
no-repeat,
repeat-x;
background-size:
calc(16.667% + 10px) 100%,
auto;
padding: 0 41.667%;
text-align: center;
}
答案 1 :(得分：1)
您可以使用2个非常长的伪元素，这些伪元素将在文本元素之前和之后绝对定位。文本元素的容器应该隐藏溢出以剪切伪元素的冗余部分。
h2 {
font-size: 14px;
text-align: center;
overflow: hidden;
}
h2 span {
display: inline-block;
position: relative;
padding: 0 10px;
}
h2 span::before, h2 span::after {
position: absolute;
top: 50%;
width: 1000px;
border-top: 1px dashed;
content: '';
}
h2 span::before {
right: 100%;
}
h2 span::after {
left: 100%;
}<h2><span>Short</span></h2>
<h2><span>A bit longer</span></h2>
<h2><span>This is even longer</span></h2>
<h2><span>Longer Text Even Longer Sometimes This Happens</span></h2>
答案 2 :(得分：0)
希望有所帮助
CSS：
h4 {
text-transform: none !important;
width: 100%;
text-align: center;
border-bottom: 2px dotted #4cadc9;
line-height: 0.1em;
margin: 10px 0 20px;
}
h4 span {
background:#fff; //your bg color
padding:0 10px;
}
HTML：
<h4><span>your text</span></h4>