Jak zastosować obramowanie-dół do każdej linii DIV?

Question

Mój kod:

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>  

jako tekst jest wystarczająco długi word-wrap ma miejsce. Czy możliwe jest zastosowanie dolnej granicy w formacie CSS do każdego wiersza tekstu? Co więcej, czy możliwe jest, aby każda krawędź dolna była na całej szerokości DIV (nawet jeśli tekst ma tylko połowę lub mniej szerokości linii)?

Answer 1

Można po prostu zastosować podkreślenie w tekście:

div { 
    text-decoration: underline; 
} 

Answer 2

text-decoration:underline będzie działać, ale jeśli chcesz mieć większą kontrolę nad „underline” (kolory, style, szerokość) można to zrobić:

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

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

Answer 3

div jest element bloku, zamiast tego, stosowanie przedział, który jest wbudowany.

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

Zobacz ten skrzypce z innego podejścia, wykorzystując doświadczenie jako dolnej granicy:

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

Answer 4

oraz dla jednego, zawinąć tekst w <p>

następnie można zastosować

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