it-swarm.com.ru

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

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

PROBLEM: вы заполняете свой DIV динамическим текстом, и неизбежно появляется сверхдлинное слово, которое выходит за границы вашего столбца div и делает ваш сайт непрофессиональным.

RETRO-WHINING: Это никогда не происходило с макетами таблиц. Ячейка таблицы всегда будет расширяться до ширины самого длинного слова.

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

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

146
Edward Tanguay

Мягкий дефис

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

averyvery­longword

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

averyverylongword

или же

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

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

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

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

элемент <wbr>

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

averyvery<wbr>longword

Разрывы без дефиса:

averyvery
Длинное слово

Вы можете добиться того же с помощью символа пробела нулевой ширины &#8203; (или &#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 ниже также хороши.

135
Kornel

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

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

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

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

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

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

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

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

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

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

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

41
Oli

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

В некоторых работах, выполненных с электронными письмами в формате 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 Word-Wrap для 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

33
Neil Monroe

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

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

14
sanimalp

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

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

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

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

13
VonC

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

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

9
Zac Imboden

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

6
dylanfm

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

.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 для меня.

6
mpen

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

display:table;
Word-break:break-all;
5
Jacob

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

Word-wrap: break-Word;

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

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

overflow: hidden;

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

4
alexmeia

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

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

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

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

abcde&shy;12345678901234

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

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

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

abcde&shy;12345&shy;67890&shy;1234
4
enigment

pdate: Обработка этого в 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\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^\\s\\.\/\\,[email protected]\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1&#8203;') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1&#8203;'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,[email protected]\|-])/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\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^&\\s\\.\/\\,[email protected]\\|-])', 'g');
4
enigment

Для работы Word-wrap необходимо установить "table-layout: fixed"

3
Aleks

Используйте это

Word-wrap: break-Word;
overflow-wrap: break-Word;
Word-break: break-all;
2
Jay Patel

ГИФЕНАТОР - правильный ответ (приведенный выше). Настоящая проблема, стоящая за вашим вопросом, заключается в том, что веб-браузеры по-прежнему (в 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

2
Snaky Love

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

2
DoctorFox

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

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

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

1
Dan Brown

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

1
John Gietzen
p {
    overflow-wrap: break-Word;
}


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

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

    -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

1
jacobsvensson

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

0
mb21

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

0
Kishan Subhash

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

0
Olofu Mark