Обтекание длинного текста в CSS

Я использую комбинацию

 word-wrap: break-word; overflow: hidden; 

чтобы справиться с этим. Параметр « word-wrap слов» позволяет обертывать слово, несмотря на его длину в браузерах, которые поддерживают это свойство, в то время как параметр overflow приведет к его обрезанию в конце доступного пространства в браузерах, которые не распознают word-wrap , Это примерно так же изящно деградации, как вы, вероятно, получите, не перейдя на javascript.

Согласно http://www.w3.org/TR/css3-text/#word-break0

word-break: break-all;

… не делает то же самое, что и word-wrap (который теперь переименован в overflow-wrap ), потому что даже маленькие слова могут быть разбиты, когда они находятся в конце строки. Но это работает.

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

В дополнение к ответу Duroth вы можете использовать следующий PHP-код, чтобы вставить застенчивые дефисы

 $longest_length = 15; $string_with_long_word = 'short lonngerrrrr lonnnnnnnggeeeeeeeeeeeeeeeeeessssssssssssssssstttttttttttttt and another looooooooooooonnnnnnnnngwwooooooooororoooorrrrrd'; $string = preg_replace_callback("/[a-z0-9]{{$longest_length},}/", 'putShyHyphen', $string_with_long_word); function putShyHyphen($matches) { $string = $matches[0]; $newstring = ''; for ($i=0; $i<strlen($string); $i++) { $newstring .= $string[$i] . '&shy;'; } return $newstring; } echo $string_with_long_word . '<hr />'; echo $string; 

простой css. Попробуйте следующее: поместите текст в < pre>...< /pre>

Правило css

 pre { overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ /* width: 99%; */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } 

К сожалению, если вы не довольны поддержкой только определенных браузеров (IE7 / Win, Safari, Firefox 3.5), у вас нет чистого решения CSS для вашей проблемы.

word-wrap: break-word; работает, но только в IE.

Если вы можете изменить текст, на стороне сервера (PHP, ASP) или, возможно, на стороне клиента (Javascript), вы можете написать небольшую функцию, которая вставляет в ваш текст «застенчивые дефисы» ( & shy; ). Таким образом, текст может быть разбит на каждом экземпляре дефиса, и застенчивые дефисы не будут отображаться, если слово не сломано.

Изменить, пример:

 bla­bla­bla­bla­bla­bla­bla­bla­bla­ (etc) 

будет отображаться следующим образом в вашем браузере:

 blablabla- blablabla- blabla 

Вы должны прибегнуть к JavaScript и использовать такую ​​функцию:

 <script language="javascript"> function wrap() { var data = document.getElementsByTagName('yourtaghere'); var desiredLength = 40 ; var delimiter = "<br />"; for( var i=0; i < data.length; ++i ) { cellLength=data[i].innerHTML.length if( desiredLength < cellLength ) { var counter=0; var output=""; while( counter < cellLength ) { output += data[i].innerHTML.substr(counter,desiredLength) + delimiter; counter+= desiredLength; } data[i].innerHTML=output; } } } window.onload=wrap; </script> 

Или вы можете использовать дешифратор

Новый ответ, так как вы изменили свой вопрос:

Это очень упрощенное решение PHP:

 <?php $string = "AnExtremelyLongStringWithoutWhitespacesOrBreakpointsOfAnyKindThatWillCompletelyAndUtterlyRuinYourWebsiteDesign"; for($i=0; $i<strlen($string); $i++) { $newString .= $string[$i] . '&shy;'; } echo $newString; 

То же самое можно достичь на любом языке.

Поскольку word-wrap: break-word не работает, когда ширина не фиксирована (и даже меньше в <table> ), Stack Exchange добавляет некоторые невидимые маркеры Unicode, которые браузеры используют для поиска возможных позиций для разрывов строк. Но: эти невидимые маркеры все еще существуют, когда посетитель копирует текст, что может быть плохо. Подробнее о Meta, https://meta.stackexchange.com/questions/170970/occasionally-the-unicode-character-sequence-u200c-u200b-zwnj-zwsp-is-insert/ .

Вместо магии Unicode вставка <span style="display: inline-block"></span> Каждые несколько символов, кажется, не имеют плохого эффекта при копировании полученного текста. Это работает для меня в Chrome 25, Firefox 19, Safari 6, Internet Explorer 9 (в Windows 7 на Parallels на Mac, тоже работает симуляция IE8 и IE7), браузер для браузера и Chrome на Android 4.1 и Safari на iOS 6.1.2 , и, вероятно, также поддерживается в Opera . См. Этот пример JS Bin .

Когда-нибудь, <wbr> будет решением, но не сегодня : хотя IE7 его поддерживал, IE8 и IE9 этого не делают.

Предлагаемые теги работают для разрыва очень длинных слов (или URL-адресов), но вы получите смешанные результаты от браузера к браузеру, пытающегося передать текст в узких div. Например, 200px div:

<div style="font-size:12px;font-family:monospace;width:200px;word-break:break-all;word-wrap:break-word;">1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890 1234567890</div>

В Chrome числа ломаются, в Firefox их нет – вы получаете два столбца чисел! Кажется, Firefox не учитывает, сколько места доступно в предыдущей строке «длинного» слова – оно не ломается при каждой возможности. Если это поведение будет исправлено, я надеюсь, что Firefox также рассмотрит, как это влияет на выравнивание текста.

«Застенчивые» теги помогают Firefox, но вы по-прежнему получаете «оборванный» текст. Я не делал обширных тестов, но кажется, что застенчивые теги создают непредсказуемые результаты (divs теряют свой стиль), когда они используются в коротких словах (менее 8 символов) в Firefox. Я лично предпочитаю более агрессивные перерывы Chrome!