Css word wrap, который обертывает целое слово, не нарушая их?

Мне нужно разместить длинный текст шириной около 300 пикселей. Я использую этот css:

 div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }

Моя проблема связана с word-wrap:break-word;. Он разбивает слова посреди слова. Но мне нужно, чтобы слова оставались такими, какими они есть, и для того, чтобы документ был достаточно умным, чтобы сломать линию, когда это уместно, и сохранить сами слова без изменений.

Это возможно? Я пробовал каждый вариант word-wrap, но ничего не работает. Либо абзацы не ломаются, и текст остается на экране, либо слова сломаны, а несколько букв находятся в одной строке, а другие буквы - в следующей строке.

EDIT: добавление моего кода для создания конкретного примера. Весь мой элемент style:

<style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}

div {
    width: 300px;
    color:white;
    font-size:10px;
    word-wrap:break-word;
}

pre {white-space:break;}

</style>

Затем в элементе body:

<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
    דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.

</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>

</body>
</html>

Ответ 1

Вам не нужно ничего особенного делать. Обычно текст разрывается между словами.

Если этого не произойдет, то

слишком большой контейнер
контейнер явно установлен, чтобы вообще не разбивать пространства. Например, если это элемент <pre> или имеет css white-space:pre; или white-space:nowrap;.
текст содержит неразрывные пробелы ( ) вместо нормальных пробелов.

Решение: используйте

white-space: pre-wrap;

Он заставит элемент вести себя как элемент pre, за исключением того, что он также обертывается, когда строка слишком длинная. Смотрите также: http://css-tricks.com/almanac/properties/w/whitespace/

Ответ 2

Я обманывался этим. Люди также не говорили об установке стиля слома. Правила разрыва слова по умолчанию должны завершать слово в конце пространства контейнера, но не сохраняют слово неповрежденным.

Итак, решение вашей проблемы в CSS было бы следующим:

pre{
    white-space: pre-wrap;
    word-break: keep-all; /*this stops the word breaking*/
}

Изменить: Я возился с этим дальше, и потому, что я использую бутстрап, их стиль, похоже, очень часто возится с pre tag. Используйте ключевое слово! Important, чтобы переопределить их стиль.

Ответ 3

Примечание: Убедитесь, что ваши данные не читаются. word word word или другие браузеры, кроме хром, считают свое слово

Звучит сумасшедшим, но ошибка в мобильном приложении нашей компании делает это, и пока я не проверил данные API, я думал, что Интернет сломался: p