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

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

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

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

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

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

Обычно я справлялся с этим, используя комбинацию 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 символов каждое. Кажется, это работает для всех случаев использования, которые мне передали.

Использование регулярного выражения в 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;
}

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

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

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

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

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

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

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