CODEWITHSUNDEEP
htmlcss
vxl
vxl

Reputation: 103

How do I apply a border-bottom to each line of a DIV?

My code:

div {
    border-bottom: 1px solid;
} 

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</div>

As the text is long enough word-wrap is taking place. Is it possible to apply a CSS formatted bottom border to the each line of text? Moreover, is it possible to have every bottom border to be at full width of DIV (even if text is only half or less of line width)?

Upvotes: 7

Views: 16910

Answers (4)

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

A div is a block element, instead of that, use a span that is an inline.

<style>
div span{
    border-bottom: 1px solid;
} 
</style>
<div>
   <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
   </span>
</div>

See this fiddle with a different approach, using a background as border bottom:

http://jsfiddle.net/YcSUQ/3/

Upvotes: 1

David Nguyen
David Nguyen

Reputation: 8528

well for one, wrap the text in <p>

then you can apply

p {border-bottom: 1px solid black;}

Upvotes: 2

No Results Found
No Results Found

Reputation: 102745

text-decoration:underline will work, but if you want more control over the "underline" (colors, styles, width) you can do this:

div {
    border-bottom: 1px solid;
    display:inline;
}

Demo: http://jsfiddle.net/ckt8L/

Upvotes: 15

animuson
animuson

Reputation: 54729

You could just apply an underline to the text:

div {
    text-decoration: underline;
}

Upvotes: 1

Related Questions