如何将点作为带有内嵌文本的水平分隔符，如此截图中所示？

Question

前几天我在this iA Blog post进行了冲浪，试图找出他们是如何在日期周围做分隔符的。

我查看了CSS并发现它只能使用自己的特殊字体。没有使用他们的字体有没有办法做到这一点？如果没有使用图像做同样的事情会有什么黑客攻击？

下面的截图：

---

Answer 1

我曾经遇到过同样的问题，我想出了这个问题：

.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:''; 
display:table-cell; 
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}

我使用伪元素和一些类似于表的功能。它有一些限制，但它总是伸展到全宽。您所要做的就是更改background并将类添加到您选择的元素中。

DEMO：http://dabblet.com/gist/2172806

Answer 2

我使用负（相对em）边距将标题放在包含块的虚线顶边框上。这应该在font-size更改时保存代码。有关示例，请参阅CodePen。

Answer 3

例如，您可以使用顶部带有虚线边框的div，例如此jsFiddle。

基本上你可以将文字放在边框上（即使用绝对定位）并对其应用白色背景。

<div>
    <p>I. JUNE 2012</p>
</div>


div {
  border-top: 2px dotted #eee;
  position: relative;
  text-align: center;        
}

p {
  background: white;
  position: absolute;
  top: -25px;
  padding: 0 10px;
}

Answer 4

创建一个带有虚线边框的元素，并在其中居中一个带有白色背景和溢出父级高度的位置的元素。

一个粗略的例子：

<强> HTML

<div class="title_container">
    <div class="title">I. June 2012</div>
</div>

<强> CSS

.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}

.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}

参见 jsFiddle demo

Answer 5

您可以使用this之类的内容。但它对字体和大小的变化可能不是很强大。

HTML：

<div id='container'>
    <div class='dotted'>
        <span>2013-03-10</span>
    </div>
</div>

CSS：

#container {
    width: 30em;
}

.dotted {
    text-align: center;
    position: relative;
    top: 1em;
    border-top: 1px dotted #888;
    overflow-y: visible;
}

.dotted span {
    display: inline-block;
    position: relative;
    top: -0.75em;
    background: #fff;
    padding: 0 1ex;
}