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.
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 :(
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>
but if i use float:left for all elements there is anouther issue: white line should end at the right side of container.
Maybe there are some css best-practices for this issue, or somebody could give some advice..? Any ideas will be helpful :)!
To underline a text in HTML, use the <u> tag. The <u> tag deprecated in HTML, but then re-introduced in HTML5. Now it represents a text different from another text stylistically, such as a misspelled word. To underline a text, you can also use the style attribute.
Instead of using the built-in text-decoration: underline; we are going to create our own underline using border-bottom-style property and then we can add padding-bottom to push it away as much amount we want. Example: We can increase the gap between the text and underlining using CSS.
You can insert line breaks in HTML with the <br> tag, which is equivalent to a carriage return on a keyboard. Be aware that HTML will ignore any line break from a keyboard's return key.
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>
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;
}
Note: To add support for IE8, either use an element other than header
or use html5shiv.
to really do what you want, to have lines interspersed with text to take up 100% of the parent container, with the blocks of text evenly spaced, is most likely going to require the use of javascript. A jQuery plugin could be created for such a purpose.
Here's an extremely crude version of code that could be the start of such a solution
http://jsfiddle.net/jackwanders/XJNpz/
But even here, maintaining the proper width for the lines is not ideal, as quickly making the viewport smaller will result in one line breaking down.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With