Jak zawijasz długie słowa na znak nowej linii i unikasz przewijania w poziomie za pomocą CSS?

Question

Mam html folowing:

<div class="box"> 
    long text here 
</div> 

i CSS:

.box { 
    width: 400px; 
    height: 100px; 
    overflow: auto; 
    border: 1px gold solid; 
} 

Chcę tylko pionowy zwój. Ale gdy słowo jest za długie, wyświetlany jest poziomy przewijany. Jak zrobić zawijanie długich słów?

W razie potrzeby mogę użyć sztuczki z jQuery lub PHP, ale chciałbym ją rozwiązać za pomocą CSS, ponieważ jest to zadanie CSS.

Można bawić tutaj: http://jsfiddle.net/879bc/1/

Answer 1

word-wrap: break-word 

https://developer.mozilla.org/en/CSS/word-wrap

Answer 2

roztworze Użyłem w przeszłości jest biblioteką wielokropek jak http://dotdotdot.frebsite.nl/ dla jQuery, można określić liczbę znaków i to kropka kropka kropka po tym, więc wszystko pasuje w jednej linii.

Answer 3

W przypadku niestandardowego łamania wyrazów istnieje specjalny znak html, który nie jest często używany- ­ (miękki łącznik) - który podzieli słowa na 2 wiersze i wstawi myślnik po pierwszej części słowa, jeśli zbliża się słowo krawędź jego pojemnika. Problem polega na tym, że musisz je umieścić wszędzie, gdzie chcesz. Jak możesz jednak powiedzieć, możesz także ustawić funkcję js lub php i wstawić je do odpowiednich miejsc.