我有一个小挑战,我没有在Stack Overflow上找到任何解决方案.
这就是我得到的：
这就是我喜欢它的方式：
为了产生这种标题效果,我正在使用绝对位置.我甚至不知道标题的宽度和高度.因此,使用此解决方案时大文本会中断.
我的HTML：
<div class="content"> <h1 class="title">February 2015</h1> <p>Mussum ipsum cacilds,vidis litro abertis. Consetis adipiscings elitis. Pra lá,depois divoltis porris,paradis. Paisis,filhis,espiritis santis. Mé faiz elementum girarzis,nisi eros vermeio,in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis,mais bolis eu num gostis.</p> </div>
我的CSS：
.content {
border: 3px double black;
padding-top: 60px;
position: relative;
width: 350px;
}
.content p { margin: 20px; }
.title {
background: black;
border-radius: 5px;
color: white;
left: 50%;
padding: 10px;
position: absolute;
text-align: center;
transform: translate(-50%,-50%);
top: 0;
}
查看Codepen上的示例,让生活更轻松：
http://codepen.io/caio/pen/ZYoyPb
解决方法
最简单的解决方案是添加white-space：nowrap.这样,h1文本不会中断到新行.
(updated example)
.title {
white-space: nowrap;
background: black;
border-radius: 5px;
color: white;
left: 50%;
padding: 10px;
position: absolute;
text-align: center;
transform: translate(-50%,-50%);
top: 0;
}
此外,您还可以添加文本溢出：省略号/溢出：隐藏/宽度：100％,以便文本形成省略号并且永远不会中断到新行. (example here)