Перенос слов в css/js

Я ищу кросс-браузерный способ обертывания длинных фрагментов текста, у которых нет разломов (например, длинных URL-адресов) внутри div с заранее определенными ширинами.

Вот некоторые решения, которые я нашел в Интернете, и почему они не работают для меня:

  • переполнение: скрытое/авто/прокрутка. Мне нужен весь текст, который будет видимым без прокрутки. Div может расти вертикально, но не горизонтально.
  • Инъекция и застенчивость; в строку через js/server-side - & shy; теперь поддерживается FF3, но копирование и вставка URL-адреса с помощью & shy; в середине не будет работать в Safari. Кроме того, насколько мне известно, нет чистого метода измерения ширины текста, чтобы найти наилучшие смещения строк, чтобы добавить эти символы (там один хакерский путь, см. Следующий пункт). Другая проблема заключается в том, что масштабирование в Firefox и Opera может легко нарушить это.
  • сбрасывая текст в скрытый элемент и измеряя offsetWidth - связанный с элементом выше, он требует добавления дополнительных символов в строку. Кроме того, измерение количества прерываний, требуемых в длинном тексте, может потребовать тысячи дорогостоящих вставок DOM (по одной для каждой длины подстроки), что может эффективно заморозить сайт.
  • с использованием моноширинного шрифта - снова, масштабирование может испортить вычисления ширины, и текст не может быть оформлен свободно.

Вещи, которые выглядят многообещающими, но не совсем там:

  • word-wrap: break-word - теперь часть рабочего проекта CSS3, но он не поддерживается либо Firefox, Opera или Safari. Это было бы идеальным решением, если бы оно работало во всех браузерах сегодня: (
  • инъекции <wbr> теги в строку через js/server-side - копирование и склеивание URL-адресов работает во всех браузерах, но у меня все еще нет хорошего способа измерить, где положить перерывы. Кроме того, этот тег недействителен HTML.
  • добавление перерывов после каждого символа - это лучше, чем тысячи вложений DOM, но все же не идеально (добавление элементов DOM в документ сжигает память и замедляет селекторные запросы, между прочим).

Есть ли у кого-нибудь больше идей о том, как решить эту проблему?

ОТВЕТЫ

Ответ 1

Css yo!

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

Также я только что нашел эту статью http://www.impressivewebs.com/word-wrap-css3/

Поэтому вы должны использовать

.wordwrap {  
    word-wrap: break-word;
}  

.no_wordwrap {  
    word-wrap: normal;
}

Ответ 2

Я обычно обрабатывал это, используя комбинацию word-wrap и <wbr>. Обратите внимание, что существует несколько вариантов . как вы можете видеть, &#8203;, вероятно, лучший выбор для совместимости.

word-wrap Поддержка браузера не страшна, все рассмотрено, Safari, Internet Explorer и Firefox 3.1 (Alpha Build) поддерживают ее (src), поэтому мы можем быть не так уж далеко.

Что касается сбоя на стороне сервера, я довольно успешно использовал этот метод (php):

function _wordwrap($text)   {
    $split = explode(" ", $text);
    foreach($split as $key=>$value)   {
        if (strlen($value) > 10)    {
            $split[$key] = chunk_split($value, 5, "&#8203;");
        }
    }
    return implode(" ", $split);
}

В принципе, для слов более 10 символов я разделяю их по 5 символов. Это, похоже, работает для всех случаев использования, которые мне были вручены.

Ответ 3

Здесь была небольшая проблема textarea со 100% шириной игнорирует ширину родительского элемента в IE7

Не знаю, было ли когда-либо найдено какое-либо окончательное решение, но похоже, что ближайший был word-break: break-all, который мог бы выполнять эту работу в Internet Exploder.

Я также нашел этот http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html похож на мои закладки, что указывает на работу вокруг большинства других браузеров, что может помочь.

CSS3 будет отличным, если он когда-нибудь появится здесь...

Надеюсь, что это поможет, будет интересно узнать, что вы придумали. Извините, я не могу предложить ничего протестированного или более конкретного.

Ответ 4

Использование регулярного выражения в PHP должно быть быстрее для разрыва длинных слов. Я создал функцию, которая обрабатывает htmlspecialchars и разрывает слова с помощью & shy; Вот функция для всех, кто заинтересован. Просто передайте строку и максимальную длину слова (оставьте как 0, если вы не хотите разбить слова с помощью & shy;), и она вернет строку с html специальными символами, а слова сломаны с помощью & shy;

function htmlspecialchars2($string = "", $maxWordLength = 0)
{
    if($maxWordLength > 0)
    {
        $pattern = '/(\S{'.$maxWordLength.',}?)/';
        $replacement = '$1&shy;';
        $string = preg_replace($pattern, $replacement, $string);
    }

    //now encode special chars but dont encode &shy;
    $string = preg_replace(array('/\&(?!shy\;)/','/\"/',"/\'/",'/\</','/\>/'), array('&amp;','&quot;','&#039;','&lt;','&gt;'), $string);

    return $string;
}

Ответ 5

Вы можете использовать атрибут table layout + word-wrap CSS, который теперь работает в IE7-8 и FF3.5. Это не решит проблему, но по крайней мере ваш дизайн не будет нарушен.

Ответ 6

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

Ответ 7

Очень похоже на ответ Оуэна, это обеспечивает то же самое, что и серверная сторона в одной строке:

return preg_replace_callback( '/\w{10,}/', create_function( '$matches', 'return chunk_split( $matches[0], 5, "&#8203;" );' ), $value );

Ответ 8

это может решить вашу проблему.

function htmlspecialchars2($string = "", $maxWordLength = 0){
 return  wordwrap($string , $maxWordLength,"\n", true);
 }