All geek questions in one place

A line below the text with spaces. Is this possible with html & css?

I spent many hours on it. I tried to describe the problem in the attached image. You need to wrap the text with white lines with spaces between lines and texts.

enter image description here

The first solution I was thinking about was to simply put the text in a line using the smth line "margin-top: -20px;" and provide a custom background for the text container (e.g. gray). But this is not a solution, because the container background is transparent :(

I thought of doing something 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 another problem: the white line should end on the right side of the container.

Perhaps there are some better recommendations for this problem, or someone can give some advice ..? Any ideas would be helpful :)!

+6
source share
5 answers

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, use an element other than header , or use html5shiv .

+5
source

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; }

enter image description here

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");
+1
source

in order to really do what you want lines interspersed with text to occupy 100% of the parent container, with blocks of text at regular intervals, most likely will require javascript. A jQuery plugin can be created for this purpose.

Here is a very crude version of the code that could be the beginning of such a decision

http://jsfiddle.net/jackwanders/XJNpz/

But even here, maintaining the correct line width is not ideal, since quickly reducing the size of the viewport will destroy one line.

+1
source

Yesterday I answered the same question. Here, look → How to have a horizontal line in the middle of the html header with CSS?

It relies on a linear gradient. If you do not support old IE, it works fine.

0
source

check this:

 <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>
0
source

Source: https://habr.com/ru/post/919616/

More articles:


All Articles