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

Ответ 1

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

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

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

Ответ 2

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

word-break: break-all;

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

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

Ответ 3

В дополнение к ответу 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;

Ответ 4

простой 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+ */
}

Ответ 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

Ответ 6

Вам нужно прибегнуть к 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>

Или вы можете использовать hyphenator

Ответ 7

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

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

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

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

Ответ 8

Поскольку 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/.

Вместо магии Юникода вставка <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 этого не делают.

Ответ 9

Предлагаемые теги работают для разрыва очень длинных слов (или 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 более агрессивные перерывы!