CODEWITHSUNDEEP
htmlcss
JAN
JAN

Reputation: 21865

How to wrap entire line with overline and underline , until the end of the line ?

I'm trying to underline and overline a line until the end of the line , but this CSS code 

            .statistics_lines {
                text-decoration: overline underline;
            }

only marks an underline & overline for the words only .

How can I force the entire line to be underlined , with the words ?

Like that :

enter image description here

Upvotes: 1

Views: 3081

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Since the effects of text-decoration apply only to the textual content of the element, the only way to make them stretch across the available width is to make the content that wide. This could be done with JavaScript code that appends no-break spaces until the width is exceeded, then trace back one space. In plain CSS, you need to use a long string of no-break spaces (hoping that it will be enough) as generated content and to suppress overflow:

.statistics_lines {
  text-decoration: overline underline;
  white-space: nowrap;
  overflow: hidden;
}
.statistics_lines:after {
  content: "\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}
<div class=statistics_lines>this is my line</div>

Since overline and underline are too close to the letter glyphs in many ways, it is probably better to use upper and lower border instead, as suggested in other answers.

Upvotes: 1

George
George

Reputation: 36784

There isn't a way using text-decoration since that style is the decoration added to the text of that element. You could use multiple spaces (&nbsp;) but it'd be sloppy and wouldn't always be the width of the element.

Since we are talking about a single line, you can use the border of your element to get what you are looking for. If the element is inline, you will need to change its display style.

I've also added padding:

.statistics_lines {
    display:block;
    border-top:1px solid #DDD;
    border-bottom:1px solid #CCC;
    padding:7px 4px;
}
<span class='statistics_lines'>this is my line</span>

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

If you are talking about a single line then you may just use the border-top and border-bottom property for that.

But if you are talking about the multiple line sentences then you may use a background which width is to be just 1px and height would be the line height of your paragraph has and the background should repeat then you'll see exactly what you want.

Upvotes: 1

EmmanuelBeziat
EmmanuelBeziat

Reputation: 734

Use border instead. Like this :

.element {
  border-bottom: 1px solid #eee;
}
<div class="element">This is a test</div>

You can "play" with it in order to obtain any style you want. Example :

.element {
  border-bottom: 1px dotted #888;
  padding: 15px 0;
}
<div class="element">This is a test</div>

Upvotes: 1

Related Questions