Horizontal line between multiple paragraphs (CSS)

Question

I have a CSS-problem with border-top/a horizontal line between multiple paragraphs. This is my code...

HTML:

<p>
<span class="lined">Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum.</span>
</p>

CSS:

p {
    font-family: "jubilat", sans-serif;
    font-weight: 200;
    font-size: 1.7em;
    line-height: 1.7em;
    padding-bottom: 1.5em;      
}

.lined {
    border-top: 1px solid #333;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}

Currently there is a horizontal line between each paragraph but just till the word ends. I want that there is a horizontal line till the end of the p-tag respectively with a width of 100%. Is this possible? Thanks for the answers.

Answer 1

This is actually more difficult to do than you might at first think.. The only way to get a border to break across multiple lines is if that element is set to be display: inline (which span elements are by default).. But an inline element will never fill the full width of it's container if it's contents are not large enough, which is why you see the border end at the same time as the text.

There are some solutions, though they aren't exactly the nicest.. The best ones rely on backgrounds on the element.

The most robust solution is to do this using gradients, but that has limited browser support, so make sure you check on what sort of support you need before taking this approach:

Method 1:

Remove the span, you just need a <p> tag for this one:

<p>Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum.</p>

Then, you will need to create a gradient that produces a solid 1px line, repeating horizontally, followed by a transparent section that spans the rest of your line height. You can do so with something like this:

background: linear-gradient(180deg, #000 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%);
background-size: 100% 1.7em;

* Don't forget to add the proper vendor prefixed gradient declarations for cross-browser compatibility (see my full example code below)

---

Note that I set the gradient to be black for 1px, and then transparent for the rest of the way.

Then, I used background-size to set the gradient to be the full width, and the height to match the text's line-height (1.7em).

Because the background repeats by default, it will produce a new line every 1.7em, lining up with your text.

See the full example here:

http://jsfiddle.net/M7nYe/1/

Method 2:

If browser support is important for your use case, you can use this method as an alternative..

Use the same idea as in method 1, but instead of using a gradient, create an image that is sized to the proper line height, with a solid pixel at the top, and a transparent background, then set that as the element's background-image. Same technique is at play in both methods, but one uses a gradient to reproduce the image.

Why is method 1 better?

If you decide to change the font size, or the line height of the text, you would need to adjust this background to match.. with method 2, this would require saving off a new image everytime, but method 1 would allow you to simply edit your css a bit to change the size, color, or any other aspect that you want to customize.

I hope that helps!

Answer 2

Add float:left; and width:100% to .lined like this:

.lined {
    float:left;
    width:100%;
    border-top: 1px solid #333;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}

also you can do that only with p tags setting float:left; clear:both; border-top...

I hope this help.