How to repeat a character( let's say a .) such that the width of line drawn using dots is always same as screen width. I am currently drawing the line of dots using the following code:
<label style="color:red">...........................</label>
Clearly, the number of dots are fixed in this case. My goal is to draw a line matching screen width. I am a beginner in web designing; so, any help would be greatly appreciated.
How to repeat a character( let's say a .) such that the width of line drawn using dots is always same as screen width. I am currently drawing the line of dots using the following code:
<label style="color:red">...........................</label>
Clearly, the number of dots are fixed in this case. My goal is to draw a line matching screen width. I am a beginner in web designing; so, any help would be greatly appreciated.
Share Improve this question edited Dec 23, 2014 at 18:28 Naeem Shaikh 15.7k7 gold badges52 silver badges91 bronze badges asked Nov 6, 2014 at 8:34 Deep AroraDeep Arora 2,0402 gold badges27 silver badges45 bronze badges 1-
2
That's not what a
<label>is for. – David Thomas Commented Nov 6, 2014 at 8:47
3 Answers
Reset to default 5You are on the wrong track.
<label style="color:red">...........................</label>
this is not how you draw a dotted line.
its done by dotted borders fiddle: http://jsfiddle/rrce76r9/
<div class="dotted"></div>
.dotted{
border-bottom:3px dotted red;
}
//Now All the lines is available for you whatever u can choose...
// This is Html Code. Name of this file u can give like Borders.html
<html>
<head>
<title>
Border Test
</title>
<link rel="stylesheet" href="borders.css" type="css/text"/>
</head>
<body>
<h1 id="solid">This is solid Border</h1>
<h1 id="dotted">This is dotted Border</h1>
<h1 id="dashed">This is dashed Border</h1>
<h1 id="double">This is double Border</h1>
<h1 id="groove">This is groove Border</h1>
<h1 id="ridge">This is ridge Border</h1>
<h1 id="outset">This is outset Border</h1>
<h1 id="inset">This is inset Border</h1>
</body>
</html>
//This is Css code for the above Html file. You can give the name of this file as Borders.css.
#solid
{
border-bottom:2px solid black; //here u can use border-top,border-left, border-right also instead of border-bottom.
}
#dotted
{
border-bottom:2px dotted black;
}
#dashed
{
border-bottom:2px dashed black;
}
#double
{
border-bottom:2px double black;
}
#groove
{
border-bottom:2px groove black;
}
#ridge
{
border-bottom:2px ridge black;
}
#outset
{
border-bottom:2px outset black;
}
#inset
{
border-bottom:2px inset black;
}
You cannot make a row of characters exactly the same width as some given width, such as the entire available width, which is what you probably mean by “screen width”. But I think you meant to ask to write as many “.” characters as possible on a single line, within the constraints of available space. The constraint is really the parent element’s width, so we can achieve this by repeatedly appending “.” until we exceed that constraint, then take one step back:
<span id=dots style="color:red"></span>
<script>
var dots = document.getElementById('dots');
dots.style.visibility = 'hidden';
var width, savedContent;
do {
savedContent = dots.innerHTML;
dots.innerHTML += '.';
} while(dots.offsetWidth < dots.parentNode.offsetWidth);
dots.innerHTML = savedContent;
dots.style.visibility = 'visible';
</script>The example uses span instead of label, since such text is hardly suitable for use as a label for a control. However, this choice of element does not affect this issue.
Note that the string, once created, will stay the same, even if the browser window width is changed in a manner that changes the parent element’s width (e.g. when our element is a child of body and we have no width settings in CSS).