在带空格的文本下的行。是可能通过html& css？ [英] Line under text with spaces. Is it possible via html & css?

问题描述

我花了几个小时。我试图描述附加图像上的问题。
有必要用白线包裹文本，在行&文本。

I've spent hours on this. I tried to describe issue on attached image. It is necessary to wrap text by white lines with some spaces between lines & texts.

>

第一个解决方案我想 - 只是把文本在线使用smth线margin-top：-20px;并给文本容器自定义背景（例如，灰色）。但它不是一个解决方案，因为容器的背景是透明的：（

First solution i thought about - just to put text on line using smth line "margin-top:-20px;" and give the text container custom background (for example, gray). But it's not a solution, because container's background is transparent :(

我想使这样的smth（使用float：left）：

I thought to make smth like this (using "float:left"):

<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>

但如果我使用float： authher问题：白线应该在容器的右边结束。

but if i use float:left for all elements there is anouther issue: white line should end at the right side of container.

也许有一些css最佳实践这个问题，或者有人可以给一些建议..？
任何想法都会有帮助：）！

Maybe there are some css best-practices for this issue, or somebody could give some advice..? Any ideas will be helpful :)!

推荐答案

http://jsfiddle.net/Q8yGu/5/

<header><div><span class="spacer"></span><h1>Text</h1><span class="spacer"></span><h1>Text</h1><span class="spacer"></span></div></header>
<header><div><span class="spacer"></span><h1>100% Container Width</h1><span class="spacer"></span></div></header>

CSS

CSS

body {
    background:yellow;
}
header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
}
header > a {
    font-size:.4em;
    vertical-align:middle;
    background:#25a2a4;
    color:#fff;
    text-transform:uppercase;
    font-family:monospace;
    border-radius:.5em;
    padding:.3em .5em;
    text-decoration:none;
}

注意： IE8，请使用标头以外的元素，或使用 html5shiv 。

Note: To add support for IE8, either use an element other than header or use html5shiv.

这篇关于在带空格的文本下的行。是可能通过html& css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！