Line under text with spaces. Is it possible via html & css?

Question

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.

enter image description here

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 :)!

What's stopping you from giving `.line` a custom transparent background that has a horizontal line in it? — Jon, Jul 03 '12 at 19:21
You mean .line class with line image (that will contain spaces for text)? — avasin, Jul 03 '12 at 19:31
Do you only need to support modern browsers? Or do you need IE8 or even IE7 support? — thirtydot, Jul 03 '12 at 19:46
No support for IE 6/7/8. Permanent ban for users that use them :D Really it would be nice if IE 9/10 will support it + modern browsers, otherwise we don't care :) — avasin, Jul 03 '12 at 19:51
possible duplicate of [How to position text over border?](http://stackoverflow.com/questions/11142748/how-to-position-text-over-border) — 0b10011, Jul 03 '12 at 20:02
Semantically, what is this creation? Is it a title to something? What does the line in the middle represent? I'm struggling to work out what HTML to choose. — thirtydot, Jul 03 '12 at 20:03
And a slight variation of my answer to the possible duplicate question, which should work in your case: http://jsfiddle.net/Q8yGu/2/ — 0b10011, Jul 03 '12 at 20:06
@bfrohs yes, it looks like smth i was looking for (one moment, they use 50% width for spaces elements, so it's quite impossible to put many "Title" elements in one line, that will be wrapped around) — avasin, Jul 03 '12 at 20:07
@bfrohs fantastic.. like a table, but without a table. why not? will try it in a second :) — avasin, Jul 03 '12 at 20:12
@true, use [this fiddle](http://jsfiddle.net/Q8yGu/3/) instead. I've fixed quite a few things (better spacing, bug fixes, etc). — 0b10011, Jul 03 '12 at 20:15
@true, I've added it as an answer: http://stackoverflow.com/a/11318547/526741 — 0b10011, Jul 03 '12 at 20:19
Would it be possible to get the effect with [fieldset](http://www.w3schools.com/tags/tag_fieldset.asp)? I haven't used it much so I'm not sure what styling options are out there. — Zhihao, Jul 03 '12 at 20:19
@bfrohs in chrome last example didn't work, but i got the idea. Could you post your first example? i will mark it as correct one :) One suggestion there: if we will have 3 or more texts there, we will need to calculate & setup "header span.spacer" width to another number (not 30%). but it's not a problem for me, for a moment i know how many text elements will be on the page :) — avasin, Jul 03 '12 at 20:22
@Zhihao usually it is possible to apply css to most elements. but css should be tricky :) — avasin, Jul 03 '12 at 20:24
@Zhihao, you **should not** use tags for their stylistic appearance alone. And in the case of [fieldset](http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-fieldset-element) and [legend](http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-legend-element): they are for use in **forms only**, so they cannot be used here (unless, of course, the headers are in a form). — 0b10011, Jul 03 '12 at 20:39

score 5 · Accepted Answer · edited Jul 04 '12 at 12:12

5

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

HTML

<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

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.

edited Jul 04 '12 at 12:12

thirtydot

224,678
48
389
349

answered Jul 03 '12 at 20:18

0b10011

18,397
4
65
86

Check it in a WebKit browser. – thirtydot Jul 03 '12 at 20:21
Yes, it does not seem to work on Webkit/IE7/IE8. Neat solution though. – Pablo Rincon Jul 03 '12 at 20:30
@thirydot, bug in Chrome. Fixed by changing `width:0;` to `width:1px;` in the `h1`. – 0b10011 Jul 03 '12 at 20:30
@true, I hate having to manually assign a `width` to the spacers, based on the number of `h1`s. – 0b10011 Jul 03 '12 at 20:32
@PabloRincon, Chrome bug is fixed. IE7 doesn't support `display:table;`. IE8 *may* be fixed with the Chrome bug (don't have access, can't test). – 0b10011 Jul 03 '12 at 20:33
@bfrohs I agree with you. Thanks very much for your help, now it works in Chrome too :) – avasin Jul 03 '12 at 20:34
@PabloRincon i don't care about IE 7/8, we don't support them. Just tested in IE9 - works fine. Can't test in IE10, i don't have it onboard :( – avasin Jul 03 '12 at 20:35
@true: For what it's worth, I'm pretty sure that this will work in IE8, provided that html5shiv is used for the HTML5 `header` element. – thirtydot Jul 03 '12 at 20:39
1

Oh, IE, and it's silly handling of unknown elements. Yeah, @true, simply register `header` as an element (in JavaScript), or use a different element in it's place, to get it working in IE8. – 0b10011 Jul 03 '12 at 20:41
@bfrohs we have too much html5 elements/issues to have support in IE8. Thank you! If you could add this comment to your answer it could be very useful for others :) – avasin Jul 03 '12 at 20:45

score 1 · Answer 2 · answered Jul 03 '12 at 20:11

1

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.

answered Jul 03 '12 at 20:11

jackwanders

15,612
3
40
40

1

I don't think that this is going to require JavaScript. – thirtydot Jul 03 '12 at 20:12
@jackwanders you are right, it works but i was looking for html/css solution.. :( – avasin Jul 03 '12 at 20:29
i suggest checking out @bfrohs' comment to your question; the answer there seems to be on the right track for a pure CSS solution ... scratch that, i see he's already ported the answer for your needs. – jackwanders Jul 03 '12 at 20:34

score 0 · Answer 3 · edited Jun 24 '14 at 16:37

0

HTML:

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

CSS:

.line {
    width: 100px;
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left;
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

Live demo: jsFiddle

jQuery method:

HTML:

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

CSS:

#container
{
    width: 1000px; 
}
.line {
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left; 
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

JavaScript:

var text_width = parseInt($(".text").css("width"));
var container_width = parseInt($("#container").css("width"));
var line_width = (container_width - text_width) / 2;    
$("div").find(".line").css("width", line_width+"px");

edited Jun 24 '14 at 16:37

answered Jul 03 '12 at 19:30

Nikola K.

7,093
13
31
39

1

Only problem I see with this solution is that you are giving a fixed width to the lines, I don't think this would work if you had a fluid container and the lines had to fill the remaining space. Also, considering dynamic text and variable font sizes, its difficult to guess how much space the text will occupy. – Pablo Rincon Jul 03 '12 at 19:33
@PabloRincon I think it's possible to do with jQuery. Do you using jQuery in your script? – Nikola K. Jul 03 '12 at 19:36
Yup, this is a solution, i was thinking about (use JQuery to set correct width to all lines according to container's width), but i supposed maybe there is another way, without using js :) I am not pro at html/css markup, so who knows, maybe there is a secret :) – avasin Jul 03 '12 at 19:38
@PabloRincon I've edited my answer with jQuery method, check it out – Nikola K. Jul 03 '12 at 19:51

score 0 · Answer 4 · edited May 23 '17 at 12:19

0

I gave an answer to this same question yesterday. Here, take a look -> How to have a horizontal line at the middle of a html heading with CSS?

It relies on a linear gradient. If you're not supporting old IEs it works perfectly.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 03 '12 at 20:07

João Paulo Macedo

15,297
4
31
41

That answer won't work as desired when the background is variable. Look at the image in this question. – thirtydot Jul 03 '12 at 20:09
OP wants the custom background image to show through the gaps in the line. Your solution would result in a solid background color behind the text – jackwanders Jul 03 '12 at 20:10
No it wouldn't. It's a transparent bakcground, only the line is visible. You can put any background image you want below it. – João Paulo Macedo Jul 03 '12 at 20:12
@JOPLOmacedo I'm referring to the text; you are setting the background color for the text to a solid color in order to hide the line. – jackwanders Jul 03 '12 at 20:13
@JOPLOmacedo You have white background for the text.. i need transparent, it would be much easier if background was not transparent :) – avasin Jul 03 '12 at 20:14
Yea, I see the problem. Okey dokey, gotta think. – João Paulo Macedo Jul 03 '12 at 20:16

score 0 · Answer 5 · answered Jul 03 '12 at 20:22

check this one:

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $(window).resize(function(){
        $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
    });
    $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
})
</script>
<style>

.line{
    margin-top:9px;
    border:1px solid silver;
    float:left;
}

.text{
    margin:auto;
    float:left;
}

</style>
<body>
<div class="line"></div>
<div class="text">text 1</div>
<div class="line"></div>
<div class="text">text 2</div>
<div class="line"></div>
</body>
</html>

It is pretty easy to do with javascript, but i would like to know if it is possible with pure css/html :) — avasin, Jul 03 '12 at 20:27

Line under text with spaces. Is it possible via html & css?

5 Answers5

HTML

CSS

jQuery method:

Linked

Related