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

<p>после перехода с table-макета на div-макет остается одна общая проблема:</p><p><strong>problem</strong>: вы заполняете свой div динамическим текстом, и неизбежно появляется сверхдлинное слово, которое выходит за границы вашего столбца div и делает ваш сайт непрофессиональным.</p><p><strong>retro-whining</strong>: это <em> никогда </em> не происходило с макетами таблиц. ячейка таблицы всегда будет расширяться до ширины самого длинного слова.</p><p><strong>severity</strong>: я вижу эту проблему даже на самых крупных сайтах, особенно на немецких сайтах, где даже такие распространенные слова, как "ограничение скорости", очень длинные ("geschwindigkeitsbegrenzung").</p><p>у кого-нибудь есть работоспособное решение этого?</p>

<h2>мягкий дефис</h2><p>вы можете указать браузерам, где разбивать длинные слова, вставив мягкий дефис (<code></code>):</p><pre><code>averyverylongword </code></pre><p>может быть представлен как</p><blockquote> <p>averyverylongword</p> </blockquote><p>или же</p><blockquote> <p>averyvery-<br> длинное слово</p> </blockquote><p>хорошее регулярное выражение может гарантировать, что вы не будете вставлять их, если в этом нет необходимости:</p><pre><code>/([^\s-]{5})([^\s-]{5})/ → $1$2 </code></pre><p>браузеры и поисковые системы достаточно умны, чтобы игнорировать этот символ при поиске текста, а chrome и firefox (не проверял других) игнорируют его при копировании текста в буфер обмена.</p><h2>элемент <code><wbr></code></h2><p>другой вариант - ввести <code><wbr></code>, прежний <a href="http://www.quirksmode.org/oddsandends/wbr.html">ie-ism</a> , который теперь <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-wbr-element">в html5</a> :</p><pre><code>averyvery<wbr>longword </code></pre><p>разрывы без дефиса:</p><blockquote> <p>averyvery<br> длинное слово</p> </blockquote><p>вы можете добиться того же с помощью символа пробела нулевой ширины <code></code> (или <code></code>).</p><hr><p>к вашему сведению, также есть <a href="http://www.w3.org/tr/css3-text/#hyphenation">css <code>hyphens: auto</code></a> , поддерживаемый последними версиями ie, firefox и safari ( <a href="http://caniuse.com/#feat=css-hyphens">но в настоящее время не chrome</a> ):</p><pre><code>div.breaking { hyphens: auto; } </code></pre><p>тем не менее, этот перенос основан на словаре переносов, и он не гарантирует разбиение длинных слов. это может сделать оправданный текст более симпатичным, хотя.</p><h2>ретро-ноющее решение</h2><p><code><table></code> для разметки плох, но <code>display:table</code> для других элементов в порядке. это будет так же причудливо (и натянуто) как столы старой школы:</p><pre><code>div.breaking { display: table-cell; } </code></pre><hr><p>ответы <code>overflow</code> и <code>white-space: pre-wrap</code> ниже также хороши.</p>

<p>два исправления:</p><ol> <li><code>overflow:scroll</code> - это гарантирует, что ваш контент можно увидеть за счет дизайна (полосы прокрутки уродливы)</li> <li><code>overflow:hidden</code> - просто отключает любое переполнение. это означает, что люди не могут читать контент, хотя.</li> </ol><p>если (в примере so) вы хотите, чтобы это перекрывало отступы, вам, вероятно, потребуется создать еще один div внутри отступа для хранения вашего контента.</p><p>правка: как указано в других ответах, существует множество методов усечения слов, будь то работа с шириной рендеринга на стороне клиента (никогда не пытайтесь сделать это на стороне сервера, так как она никогда не будет работать надежно, кроссплатформенная) js и вставка символов разрыва, или использование нестандартных и/или дико несовместимых тегов css (<code>word-wrap: break-word</code> <a href="https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow#320267">в firefox не работает</a> ).</p><p>вам всегда понадобится дескриптор переполнения. если ваш div содержит еще один фрагмент контента слишком широкого типа (изображение, таблица и т.д.), вам понадобится переполнение, чтобы он не разрушил макет/дизайн.</p><p>поэтому обязательно используйте другой метод (или их комбинацию), но не забудьте также добавить переполнение, чтобы охватить все браузеры.</p><p>изменить 2 (чтобы ответить на ваш комментарий ниже):</p><p>начать с использования свойства css <code>overflow</code> не идеально, но оно останавливает нарушение дизайна. сначала примените <code>overflow:hidden</code>. помните, что переполнение может не нарушаться при заполнении, поэтому либо вкладывайте <code>div</code>s, либо используйте границу (что вам больше подходит).</p><p>это позволит скрыть переполненный контент и, следовательно, вы можете потерять смысл. вы можете использовать полосу прокрутки (используя <code>overflow:auto</code> или <code>overflow:scroll</code> вместо <code>overflow:hidden</code>), но в зависимости от размеров div и вашего дизайна, это может не выглядеть или работать отлично.</p><p>чтобы исправить это, мы можем использовать js, чтобы вернуть вещи назад и выполнить некоторую форму автоматического усечения. я был наполовину в процессе написания какого-то псевдокода для вас, но на полпути это серьезно усложняется. если вам нужно показать как можно больше, взгляните на <a href="http://code.google.com/p/hyphenator/">дефис</a> ( <a href="https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow#320267">как указано ниже</a> ).</p><p>просто имейте в виду, что это происходит за счет пользовательских процессоров. это может привести к тому, что загрузка страниц и/или изменение их размера займет много времени.</p>

<p>css cross browser word wrap</p><pre><code>.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+ */ } </code></pre>

<p>используйте стиль <code>word-break:break-all;</code>. я знаю, что это работает на столах.</p>

<p>только что проверил ie 7, firefox 3.6.8 mac, firefox 3.6.8 windows и safari:</p><pre><code>word-wrap: break-word; </code></pre><p>работает для длинных ссылок внутри div с установленной шириной и без переполнения, объявленного в css:</p><pre><code>#consumeralerts\_leftcol{ float:left; width: 250px; margin-bottom:10px; word-wrap: break-word; } </code></pre><p>я не вижу проблем с несовместимостью</p>

<p>я только что узнал о <a href="http://code.google.com/p/hyphenator/">дефис</a> из <a href="https://stackoverflow.com/questions/315845/should-i-avoid-using-text-align-justify">этот вопрос</a> . это может решить проблему.</p>

<p>после долгих боев у меня сработало:</p><pre><code>.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; } </code></pre><p>работает в последних версиях chrome, firefox и opera.</p><p>обратите внимание, что я исключил многие из свойств <code>white-space</code>, которые предлагали другие - это фактически нарушило отступ <code>pre</code> для меня.</p>

<p>для меня на div без фиксированного размера и с динамическим контентом это работало, используя:</p><pre><code>display:table; word-break:break-all; </code></pre>

<p>решение, которое я обычно использую для этой проблемы, состоит в том, чтобы установить 2 различных правила css для ie и других браузеров:</p><pre><code>word-wrap: break-word; </code></pre><p>woks отлично работает в ie, но <strong>word-wrap</strong> не является стандартным свойством css. это специфическое свойство microsoft, которое не работает в firefox.</p><p>для firefox лучше всего использовать только css, чтобы установить правило</p><pre><code>overflow: hidden; </code></pre><p>для элемента, который содержит текст, который вы хотите обернуть. текст не переносится, но <strong>скрыть часть текста, выходящую за пределы контейнера</strong>. это может быть хорошим решением, если вам не нужно отображать весь текст (т.е. если текст находится внутри тега <code><a></code>)</p>

<p>вспомните регулярное выражение в <a href="https://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow/320196#320196">этот комментарий</a> , это хорошо, но он добавляет застенчивый дефис только между группами из 5 символов, не являющихся пробелами или дефисами. это позволяет последней группе быть намного длиннее, чем предполагалось, поскольку после нее нет соответствующей группы.</p><p>например, это:</p><pre><code>'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1$2') </code></pre><p>... результаты в этом:</p><pre><code>abcde12345678901234 </code></pre><p>вот версия, использующая позитивный взгляд, чтобы избежать этой проблемы:</p><pre><code>.replace(/([^\s-]{5})(?=[^\s-])/g, '$1') ... с таким результатом:abcde12345678901234 

<strong>pdate:</strong> обработка этого в 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 = {}; </code></pre><p>тест, как это:</p><pre><code>makewrappable('12345678901234567890 12345678901234567890 1234567890/1234567890') </code></pre><p><strong>обновление 2:</strong> похоже, что пробелы нулевой ширины на самом деле <strong>есть</strong> включены в скопированный текст по крайней мере при некоторых обстоятельствах, вы просто не можете их видеть. очевидно, что поощрение людей к копированию текста со скрытыми символами в нем - это приглашение к вводу подобных данных в другие программы или системы, даже в ваши собственные, где это может вызвать проблемы. например, если он попадает в базу данных, поиск по нему может завершиться неудачно, и такие строки поиска, скорее всего, тоже потерпят неудачу. использование клавиш со стрелками для перемещения по таким данным требует (справедливо) дополнительного нажатия клавиш для перемещения по символу, который вы не видите, что несколько странно для пользователей, если они заметят.</p><p>в закрытой системе вы можете отфильтровать этот символ на входе, чтобы защитить себя, но это не помогает другим программам и системам.</p><p>в общем, эта техника работает хорошо, но я не уверен, какой будет лучший выбор вызывающего брейка персонажа.</p><p><strong>обновление 3:</strong> наличие этого символа в данных больше не является теоретической возможностью, это наблюдаемая проблема. пользователи отправляют данные, скопированные с экрана, они сохраняются в бд, поиск прерывается, все странно сортируется и т.д.</p><p>мы сделали две вещи:</p><ol> <li>написал утилиту для удаления их из всех столбцов всех таблиц во всех источниках данных для этого приложения.</li> <li>добавлена фильтрация, чтобы удалить его в нашем стандартном процессоре ввода строк, чтобы он исчез к тому времени, когда его увидит любой код.</li> </ol><p>это работает хорошо, как и сама техника, но это предостерегающая история.</p><p><strong>обновление 4:</strong> мы используем это в контексте, где передаваемые данные могут быть экранированы html. при правильных обстоятельствах он может вставлять пробелы нулевой ширины в середину сущностей html, что приводит к неожиданным результатам.</p><p>исправлено было добавление амперсанда в список символов, на которых мы не разбиваемся, например:</p><pre><code>var longrunsregex = cachedregex('([^&\\s\\.\/\\,\_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,\_@\\|-])', 'g'); </code></pre>

<p>для работы word-wrap необходимо установить "table-layout: fixed"</p>

<p><strong>используйте это</strong></p><pre><code>word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; </code></pre>

<blockquote> <p>гифенатор - правильный ответ (приведенный выше). настоящая проблема, стоящая за вашим вопросом, заключается в том, что веб-браузеры по-прежнему (в 2008 году) крайне примитивны, поскольку у них нет функции переноса слов. послушайте, мы все еще находимся на ранних этапах использования компьютера - мы должны быть терпеливыми. пока дизайнеры правят веб-миром, нам будет трудно ждать каких-то действительно полезных новых функций.</p> </blockquote><p>обновление: по состоянию на декабрь 2011 года у нас появился еще один вариант с появлением поддержки этих тегов в ff и safari:</p><pre><code>p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } </code></pre><p>я провел некоторое базовое тестирование, и похоже, что оно работает на последних версиях mobile safari и safari 5.1.1.</p><p>таблица совместимости: <a href="https://developer.mozilla.org/en/css/hyphens#autocompatibilitytable">https://developer.mozilla.org/en/css/hyphens#autocompatibilitytable</a> </p>

<p>для совместимости с ie 8+ используйте:</p><pre><code>-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; </code></pre><p>смотрите здесь <a href="http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/">http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/</a> </p><p>все, что мне нужно было сделать, это применить это к стилю контейнера div с заданной шириной.</p>

<p>если у вас есть это -</p><pre><code> <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> </code></pre><p>просто переключитесь на вертикальный формат с содержанием divs и используйте min-width в вашем css вместо width -</p><pre><code> <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/> </code></pre><p>конечно, если вы отображаете подлинные табличные данные, то можно использовать реальную таблицу, так как она семантически верна и будет информировать людей, использующих программы чтения с экрана, которые должны находиться в таблице. это использует их для общего макета или нарезки изображений, за которые люди будут линчевать.</p>

<p>да, если это возможно, установка абсолютной ширины и установка <code>overflow : auto</code> работает хорошо.</p>

<pre><code>p { overflow-wrap: break-word; } @-moz-document url-prefix() { p { white-space: -moz-pre-wrap; word-wrap: break-word; } } </code></pre>

<p>я должен был сделать следующее, потому что, если свойства не были объявлены в правильном порядке, они случайным образом разбивали слова в неправильном месте и без добавления дефиса.</p><pre><code> -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; </code></pre><p>первоначально опубликовано enigmo: <a href="https://stackoverflow.com/a/14191114">https://stackoverflow.com/a/14191114</a> </p>

<p>"word-wrap: break-word" работает в firefox 3.5 <a href="http://hacks.mozilla.org/2009/06/word-wrap/">http://hacks.mozilla.org/2009/06/word-wrap/</a> </p>

<p>добавьте это к <code>css</code> вашего div: <code>word-wrap: break-word;</code></p>

<p>после того, как word обернется и сломается, сохраните переполнение и посмотрите, решит ли это вашу проблему. просто измените отображение вашего div на: <code>display: inline;</code></p>