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

Question

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

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

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

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

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

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

Answer 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;
}  

Answer 2

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

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, "​");
        }
    }
    return implode(" ", $split);
}

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

Answer 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 будет великолепно, если он когда-нибудь здесь появится ...

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

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

    return $string;
}