Как обернуть длинные слова в новую строку и избежать горизонтальной прокрутки с помощью CSS?

Question

У меня есть следующие html:

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

и css:

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

Я хочу только вертикальную прокрутку.Но когда слово слишком длинное, отображается горизонтальная прокрутка.Как сделать перенос длинных слов?

При необходимости я могу использовать трюк с jQuery или PHP, но я бы хотел решить его с помощью CSS, потому что это работа CSS.

Выможете поиграть здесь: http://jsfiddle.net/879bc/1/

Answer 1

word-wrap: break-word

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

Answer 2

Для произвольного разбиения слова есть специальный HTML-символ, который используется не так часто - ­ (мягкий дефис) - который разбивает слова на 2 строки и вставляет тире после первой части слова, если словоподходит к краю своего контейнера.Проблема в том, что вы должны будете размещать их везде, где хотите.Однако, как вы говорите, вы также можете настроить функцию js или php и вставить их в соответствующие места.

Answer 3

Решением, которое я использовал в прошлом, является библиотека с многоточием, например, http://dotdotdot.frebsite.nl/ для jquery, вы можете указать количество символов и задать ему точку-точку-точку, чтобы все они помещались на одной строке.