Как не допустить, чтобы длинные слова ломали мой div?

Два исправления:

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

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

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

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

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

Изменить 2 (чтобы ответить на ваш комментарий ниже):

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

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

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

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

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

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

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

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

Мягкий дефис

Вы можете указать браузерам, где разделять длинные слова, вставив мягкий дефис (­):

averyvery­longword

может быть представлено как

averyverylongword

или же

averyvery-
longword

Хорошее регулярное выражение может гарантировать, что вы не будете вставлять их без необходимости:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Браузеры и поисковые системы достаточно умен, чтобы игнорировать этот символ при поиске текста, а Chrome и Firefox (другие не тестировали) игнорируют его при копировании текста в буфер обмена.

<wbr> элемент

Другой вариант - ввести <wbr>, бывший IE-изм, который теперь в HTML5:

averyvery<wbr>longword

Переносы без дефиса:

averyvery
longword

Вы можете добиться того же с помощью символа пробела нулевой ширины ​ (или &#x200B).

К вашему сведению, есть также CSS hyphens: auto, поддерживаемый последними версиями IE, Firefox и Safari (но в настоящее время не Chrome):

div.breaking {
  hyphens: auto;
}

Однако эта расстановка переносов основана на словаре расстановки переносов, и не гарантируется разрыв длинных слов. Тем не менее, это может сделать выровненный по ширине текст красивее.

Ретро-нытье решение

<table> для верстки плох, а вот display:table на других элементах подойдет. Он будет таким же изворотливым (и эластичным), как столы старой школы:

div.breaking {
   display: table-cell;
}

overflow и white-space: pre-wrap ответы ниже тоже хороши.

Я только что узнал о переносчик от этот вопрос. Это могло бы решить проблему.

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

word-wrap: break-word;

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

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

overflow: hidden;

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

HYPHENATOR is the right answer (given above). The real problem behind your question is that web browsers are still (in 2008) extremely primitive that they do not have a hyphenation-feature. Look, we are still on the early beginnings of computer usage - we have to be patient. As long as designers rule the web world we will have a hard time waiting for some real useful new features.

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

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

Я провел базовое тестирование, и, похоже, он работает с последней версией Mobile Safari и Safari 5.1.1.

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

Да, если это возможно, установка абсолютной ширины и установка 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+, похоже, не нравится ни одно из вышеперечисленных решений, поэтому для этих браузеров (например, Mozilla / Firefox) должен быть JavaScript. Еще одно кроссбраузерное решение (JavaScript), которое включает в себя более поздние версии Opera. было бы использовать скрипт Hedger 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/

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

Необходимо установить "table-layout: fixed", чтобы перенос по словам работал.

Только что проверил 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;
}

Я не вижу проблем с несовместимостью

Перенос слов в кроссбраузерном CSS

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Повторите регулярное выражение в этот комментарий, это хорошо, но он добавляет застенчивый дефис только между группами из 5 символов без пробелов или дефисов. Это позволяет последней группе быть намного длиннее, чем предполагалось, поскольку после нее нет подходящей группы.

Например, это:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... приводит к этому:

abcde­12345678901234

Вот версия, использующая положительный прогноз, чтобы избежать этой проблемы:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... с таким результатом:

abcde­12345­67890­1234

Обновлять: Обработка этого в CSS удивительно проста и требует минимальных затрат, но вы не можете контролировать, где возникают прерывания, когда они появляются. Это нормально, если вам все равно, или ваши данные проходят длинный буквенно-цифровой цикл без каких-либо естественных разрывов. У нас было много длинных путей к файлам, URL-адресов и телефонных номеров, и у каждого из них есть места, куда лучше взломать, чем другие.

Наше решение состояло в том, чтобы сначала использовать замену регулярного выражения, чтобы поместить пробел нулевой ширины (& # 8203;) после каждых 15 (скажем) символов, которые не являются пробелами, или одного из специальных символов, где мы предпочли бы разрывы. Затем мы выполняем другую замену, помещая пробел нулевой ширины после этих специальных символов.

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

В настоящее время мы используем специальные символы разрыва: точка, косая черта, обратная косая черта, запятая, подчеркивание, @, | и дефис. Вы бы не подумали, что вам нужно что-то делать, чтобы поощрять разрыв после дефисов, но Firefox (по крайней мере, версии 3.6 и 4) не разбивает сам по себе дефисы, окруженные цифрами (например, номера телефонов).

Мы также хотели контролировать количество символов между искусственными разрывами в зависимости от доступного пространства макета. Это означало, что регулярное выражение для сопоставления длинных непрерывных прогонов должно быть динамическим. Это вызывается много раз, и мы не хотели создавать одни и те же идентичные регулярные выражения снова и снова по соображениям производительности, поэтому мы использовали простой кеш регулярных выражений, управляемый выражением регулярного выражения и его флагами.

Вот код; вы, вероятно, назвали бы функции в служебном пакете:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\./\\,_@\\|-]{' + position + '})(?=[^\\s\\./\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\./\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Тестируйте так:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Обновление 2: Похоже, что пробелы нулевой ширины на самом деле являются включены в скопированный текст по крайней мере в некоторых случаях, вы просто не можете их видеть. Очевидно, что поощрение людей копировать текст со скрытыми символами - это приглашение ввести такие данные в другие программы или системы, даже в вашу собственную, где это может вызвать проблемы. Например, если он попадает в базу данных, поиск в нем может завершиться неудачно, и такие строки поиска также могут потерпеть неудачу. Использование клавиш со стрелками для перемещения по таким данным требует (справедливо) дополнительного нажатия клавиш для перемещения по персонажу, которого вы не видите, что несколько странно для пользователей, если они это заметят.

В закрытой системе вы можете отфильтровать этот символ при вводе, чтобы защитить себя, но это не помогает другим программам и системам.

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

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

Мы сделали две вещи:

1. Написал утилиту для удаления их из всех столбцов всех таблиц во всех источниках данных для этого приложения.
2. Добавлена ​​фильтрация, чтобы удалить его в наш стандартный процессор ввода строк, поэтому он исчезнет к тому времени, когда любой код его увидит.

Это хорошо работает, как и сама техника, но это поучительная история.

Обновление 4: Мы используем это в контексте, где данные, передаваемые в него, могут быть экранированы в HTML. При правильных обстоятельствах он может вставлять пробелы нулевой ширины в середине HTML-сущностей, что дает необычный результат.

Исправление заключалось в том, чтобы добавить амперсанд в список символов, которые мы не разбиваем, например:

var longRunsRegex = cachedRegex('([^&\\s\\./\\,_@\\|-]{' + position + '})(?=[^&\\s\\./\\,_@\\|-])', 'g');

После долгих боев у меня сработало следующее:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Работает в последних версиях Chrome, Firefox и Opera.

Обратите внимание, что я исключил многие из свойств white-space, которые предлагали другие, - это фактически нарушило отступ pre для меня.

Для меня в div без фиксированного размера и с динамическим контентом он работал с использованием:

display:table;
word-break:break-all;

ведь слово оборачивается и обрывается, сохраните переполнение и посмотрите, решит ли это вашу проблему. просто измените отображение вашего div на: display: inline;

Для совместимости с IE 8+ используйте:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Смотрите здесь http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Все, что мне нужно было сделать, это применить это к стилю контейнера div с заданной шириной.

Простая функция (требуется underscore.js) - на основе ответа @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

Добавьте это в css вашего div: word-wrap: break-word;

Мне пришлось сделать следующее, потому что, если свойства не были объявлены в правильном порядке, слова в случайном порядке разбивались бы не в том месте и без добавления дефиса.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Первоначально отправлено Enigmo: https://stackoverflow.com/a/14191114

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

Использовать это

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Я написал функцию, которая отлично работает, когда она вставляет буквы ­ x в слово для хорошего разрыва строки. Все ответы здесь не поддерживали все браузеры и устройства, но это хорошо работает с PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}