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

Question

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)?

Answer 1

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/

Answer 2

well for one, wrap the text in <p>

then you can apply

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

Answer 3

You could just apply an underline to the text:

div {
    text-decoration: underline;
}

Answer 4

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/