Как не дать длинным словам сломать мой div?

HYPHENATOR является правильным ответом (данный выше). Настоящая проблема позади Вашего вопроса состоит в том, что веб-браузеры все еще (в 2008) чрезвычайно примитивны, что у них нет функции расстановки переносов. Посмотрите, мы находимся все еще в раннем начале использования компьютера - мы должны быть терпеливыми. Пока разработчики управляют веб-миром, нам будет нелегко ожидать некоторых реальных полезных новых возможностей.

ОБНОВЛЕНИЕ: По состоянию на декабрь 2011 у нас теперь есть другая опция с появляющейся поддержкой этих тегов в FF и Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

я сделал некоторое основное тестирование, и это, кажется, работает над последней версией Мобильного Safari и Safari 5.1.1.

Таблица совместимости: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Я просто узнал [приблизительно 110] hyphenator от этот вопрос . Это могло бы решить проблему.

Вы подразумеваете, что, в браузерах, которые поддерживают его, word-wrap: break-word , не работает?

, Если включенный в определение тела таблицы стилей , это должно работы всюду по всему документу.

, Если переполнение не является хорошим решением, только пользовательский JavaScript мог бы искусственно разбить длинное слово.

Примечание: существует также это <wbr> тег Разрыва слова . Это дает браузеру место, где он может разделить строку. К сожалению, эти <wbr> тег не работает во всех браузерах, только Firefox и Internet Explorer (и Opera с приемом CSS).

Решение, которое я обычно использую для этой проблемы, состоит в том, чтобы установить 2 различных css правила для IE и других браузеров:

word-wrap: break-word;

воки, прекрасные в IE, но , переход на новую строку не является стандартным свойством CSS. Это - Microsoft определенное свойство и не работает в Firefox.

Для Firefox, лучшая вещь сделать использование только CSS должен установить правило

overflow: hidden;

для элемента, который содержит текст, который Вы хотите обернуть. Это не обертывает текст, но скрывают часть текста, которые пробегаются через предел контейнера . Это может быть хорошее решение, если не важно для Вас отобразить весь текст (т.е. если текст в <a> тег)

Два фиксирует:

1. overflow:scroll - это удостоверяется, что Ваше содержание видно за счет дизайна (полосы прокрутки ужасны)
2. overflow:hidden - просто отключает любое переполнение. Это означает, что люди не могут считать содержание все же.

, Если бы (в ТАК пример) Вы хотите остановить его перекрывающий дополнение, необходимо было бы, вероятно, создать другое отделение, в дополнении, для содержания содержания.

Редактирование: Как другие ответы указывают, существует множество методов для усечения слов, быть, что разработка ширины рендеринга на стороне клиента (никогда не пытаются сделать эту серверную сторону, поскольку это никогда не будет работать надежно, кросс-платформенное) через JS и вставку символов прерывания или использование нестандартных и/или дико несовместимых тегов CSS (word-wrap: break-word , кажется, не работает в Firefox).

Вам всегда будет нужен дескриптор переполнения все же. Если Ваше отделение будет содержать другую также широкую блочную часть содержания (изображение, таблица, и т.д.), Вы должны будете переполниться, чтобы заставить его не уничтожить расположение/дизайн.

Так любой ценой используют другой метод (или комбинация их), но не забывают добавлять переполнение также, таким образом, Вы покрываете все браузеры.

Редактирование 2 (для обращения к комментарию ниже):

Начинаются с помощью свойства CSS overflow, не прекрасно, но оно останавливает повреждение проектов. Подайте заявку overflow:hidden сначала. Помните, что переполнение не могло бы повредиться при дополнении так или вложенное множество div с или использовать границу (безотносительно работ лучше всего для Вас).

Это скроет переполняющееся содержание, и поэтому Вы могли бы потерять значение. Вы могли использовать полосу прокрутки (использующий overflow:auto или overflow:scroll вместо overflow:hidden), но в зависимости от размеров отделения и Вашего дизайна, это не могло бы посмотреть или работать отлично.

Для фиксации его мы можем использовать JS, чтобы задержать вещи и сделать некоторую форму автоматизированного усечения. Я был промежуточным посредством выписывания некоторого псевдо кода для Вас, но это становится серьезно сложным о на полпути через. Если необходимо показать как можно больше, дайте hyphenator взгляд в (, как упомянуто ниже ).

Просто знать, что это прибывает за счет центральных процессоров пользователя. Это могло привести к страницам, занимающим много времени, чтобы загрузить и/или изменить размеры.

Да, если это возможно, устанавливая абсолютную ширину и установку overflow : auto работы хорошо.

Это - сложный вопрос, как мы знаем, и не поддерживаемые любым распространенным способом между браузерами. Большинство браузеров не поддерживает эту функцию исходно вообще.

В некоторой работе, сделанной с электронными письмами HTML, где пользовательское содержание использовалось, но сценарий не доступен (и даже CSS не поддерживается очень хорошо), следующий бит CSS в обертке вокруг Вашего нерасположенного с интервалами блока содержания должен, по крайней мере, помочь несколько:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

В случае основанных на Mozilla браузеров упомянутый выше файл XBL содержит:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

К сожалению, Opera 8 +, кажется, не нравится ни одно из вышеупомянутых решений, таким образом, JavaScript должен будет быть решением для тех браузеров (как Mozilla/Firefox.) Другое решение перекрестного браузера (JavaScript), который включает более поздние выпуски Opera, состояло бы в том, чтобы использовать сценарий Хеджера Wang, найденный здесь: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Другие полезные ссылки/мысли:

Несвязный Лепет» Архив Блога» Эмуляция перехода на новую строку CSS для Mozilla/Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Никакой переход на новую строку в Opera, дисплеи, прекрасные в IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera-users/2004-November/024468.html

Если у вас есть это -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

, просто переключитесь на вертикальный формат с содержащими div и используйте минимальную ширину в CSS вместо ширины -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Конечно, если вы показываете подлинный Табличные данные. Можно использовать настоящую таблицу, поскольку она семантически верна и будет информировать людей, использующих программы чтения с экрана, которые должны находиться в таблице. Люди будут линчевать вас за их использование для общего макета или нарезки изображений.

"word-wrap: break-word" работает в Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Необходимо установить «table-layout: fixed» для работы переноса слов

Используйте стиль word-break: break-all; . Я знаю, что это работает на таблицах.

Только что проверил IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows и Safari:

word-wrap: break-word;

работает для длинных ссылок внутри div с заданной шириной и без переполнения, объявленного в css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

I не вижу проблем несовместимости