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

После перехода с TABLE-макета на DIV-макет остается одна общая проблема:

ПРОБЛЕМА : вы заполняете свой DIV динамическим текстом, и неизбежно появляется сверхдлинное слово, которое простирается через край столбца div и делает ваш сайт непрофессиональным.

РЕТРО-ХОЛДИНГ : Этого никогда не случалось с макетами столов. Ячейка таблицы всегда будет расширяться до ширины самого длинного слова.

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

У кого-нибудь есть работоспособное решение этого?

Мягкий дефис

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

averyvery­longword

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

averyverylongword

или

averyvery-
длинное слово

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

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

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

<wbr> элемент

Другой вариант заключается в том, чтобы внедрить <wbr>прежний IE-ism , который теперь находится в HTML5 :

averyvery<wbr>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ответы ниже тоже хороши.

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

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

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

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

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

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

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

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

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

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

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

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

В некоторых работах, выполненных с электронными письмами в формате 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 будет использовать скрипт Хеджера Вана, найденный здесь: http://www.hedgerwow.com/360/dhtml/css-word-break.html

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

Incoherent Babble »Архив блога» Эмуляция CSS-переноса слов для Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulation-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- пользователи / 2004-ноябрь / 024468.html

CSS Cross Browser Word Wrap

.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+ */
}

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

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

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

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

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

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

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

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

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

.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;

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

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

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

... результаты в этом:

abcde­12345678901234

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

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

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

abcde­12345­67890­1234

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

word-wrap: break-word;

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

Для Firefox лучше всего использовать только CSS, чтобы установить правило

overflow: hidden;

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

Обновление: обработка этого в 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');

Необходимо установить «макет таблицы: исправлено» для переноса слов в работу

ГИФЕНАТОР - правильный ответ (приведенный выше). Настоящая проблема, стоящая за вашим вопросом, заключается в том, что веб-браузеры все еще (в 2008 году) крайне примитивны, так как у них нет функции переноса слов. Послушайте, мы все еще находимся на ранних этапах использования компьютера - мы должны быть терпеливыми. Пока дизайнеры правят веб-миром, нам будет трудно ждать каких-то действительно полезных новых функций.

ОБНОВЛЕНИЕ: По состоянию на декабрь 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

Для совместимости с 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 с заданной шириной.

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

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

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

  <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>

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

  <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/>

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

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

    -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

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

p {
    overflow-wrap: break-word;
}


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

«Word-Wrap: Break-Word» работает в Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

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

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

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

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

Я написал функцию, которая прекрасно работает, где она вставляет ­буквы 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);

}