¿Cómo aplico un borde inferior a cada línea de un DIV?

Question

Mi código:

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>  

Como el texto es lo suficientemente largo word-wrap está teniendo lugar. ¿Es posible aplicar un borde inferior con formato CSS a cada línea de texto? Además, ¿es posible tener cada borde inferior en todo el ancho de DIV (incluso si el texto es solo la mitad o menos del ancho de línea)?

Answer 1

Se podía aplicar un subrayado al texto:

div { 
    text-decoration: underline; 
} 

Answer 2

text-decoration:underline funcionará, pero si quieres más control sobre el "underline" (colores, estilos, ancho) se puede hacer esto:

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

demostración: http://jsfiddle.net/ckt8L/

Answer 3

un dIV es un elemento de bloque, en lugar de eso, utilice un lapso que es una línea.

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

Ver este violín con un enfoque diferente, usando un fondo como fondo frontera:

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

Answer 4

bien para uno, ajustar el texto en <p>

entonces puede aplicar

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