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;.
  • текст содержит неразрывные пробелы (&nbsp;) вместо нормальных пробелов.

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

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&nbsp;word&nbsp;word или другие браузеры, кроме хром, считают свое слово

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