Як не допустити, щоб довгі слова зламали мою діву?

З моменту переходу з макета TABLE на макет DIV залишається одна поширена проблема:

ЗАДАЧА : ви заповнюєте свій DIV динамічним текстом, і неминуче є наддовге слово, яке розповсюджується на край вашої колонки div та робить ваш сайт непрофесійним.

RETRO-WHINING : Цього ніколи не бувало з макетами таблиці. Комірка таблиці завжди красиво розширюватиметься на ширину найдовшого слова.

БЕЗПЕЧЕННЯ : Я бачу цю проблему навіть на найважливіших сайтах, особливо на німецьких сайтах, де навіть поширені слова типу "обмеження швидкості" дуже довгі ("Geschwindigkeitsbegrenzung").

У когось є ефективне рішення цього питання?

М’який дефіс

Ви можете вказати браузерам, де можна розділити довгі слова, вставивши м'який дефіс ( ­):

averyvery­longword

може бути надано як

всякевирічне слово

або

averyvery-
довге слово

Приємний регулярний вираз може гарантувати, що ви не будете вставляти їх, якщо не потрібно:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Веб-переглядачі та пошукові системи досить розумні, щоб ігнорувати цього персонажа під час пошуку тексту, а Chrome і Firefox (не перевіряли інших) ігнорують його під час копіювання тексту у буфер обміну.

<wbr> елемент

Іншим варіантом є введення <wbr>, колишній IE-ism , який зараз знаходиться в HTML5 :

averyvery<wbr>longword

Перерви без дефісу:

кожне
довге слово

Те саме можна досягти за допомогою символу пробілу нульової ширини ​(або &#x200B).

FYI Є також CSS,hyphens: auto підтримуваний останніми IE, Firefox та Safari ( але наразі це не Chrome ):

div.breaking {
  hyphens: auto;
}

Однак перенесення переносів ґрунтується на словнику переносу, і зламати довгі слова не гарантується. Це може зробити виправданий текст гарнішим.

Ретро-тьмяний розчин

<table>для компонування погано, але display:tableна інших елементах це добре. Це буде настільки хитро (і еластично), як старі шкільні столи:

div.breaking {
   display: table-cell;
}

overflowі white-space: pre-wrapвідповіді нижче також хороші.

Два виправлення:

1. overflow:scroll - це гарантує, що ваш вміст можна побачити за рахунок дизайну (смуги прокрутки некрасиві)
2. overflow:hidden- просто відсікає будь-який перелив. Це означає, що люди не можуть читати вміст.

Якщо (у прикладі SO) ви хочете, щоб він не перекривав прокладку, вам, мабуть, доведеться створити інший дів всередині прокладки, щоб зберігати ваш вміст.

Редагувати: Як свідчать інші відповіді, існує безліч методів для обрізання слів, будь то опрацювання ширини візуалізації на стороні клієнта (ніколи не намагайтеся робити це на стороні сервера, оскільки це ніколи не буде надійно працювати, крос-платформа) через JS та вставлення символів розриву або використання нестандартних та / або дико несумісних тегів CSS ( word-wrap: break-word схоже, не працює у Firefox ).

Вам завжди знадобиться дескриптор переповнення. Якщо ваш div містить ще один занадто широкий фрагмент блочного типу (зображення, таблиця тощо), вам знадобиться переповнення, щоб воно не руйнувало макет / дизайн.

Таким чином, використовуйте інший метод (або їх комбінацію), але не забудьте додати переповнення, щоб ви охопили всі браузери.

Редагуйте 2 (щоб вирішити ваш коментар нижче):

Почніть користуватися overflowвластивістю CSS не ідеально, але це зупиняє розбиття дизайну. Застосовуйте overflow:hiddenспочатку. Пам’ятайте, що перелив може не зламатися на підкладці, тому або гніздо div, або використовуйте бордюр (що краще для вас)

Це приховає переповнений вміст, і тому ви можете втратити сенс. Ви можете використовувати смугу прокрутки (використовуючи overflow:autoабо overflow:scrollзамість неї overflow:hidden), але залежно від розмірів Div та вашого дизайну це може не виглядати чи чудово працювати.

Щоб виправити це, ми можемо використовувати JS, щоб відтягувати речі назад і робити певну форму автоматизованого усічення. Я на півдорозі виписав для вас якийсь псевдо-код, але він стає серйозно складним на півдорозі. Якщо вам потрібно проявити якнайбільше, дайте переглянути гіфенатору ( як зазначено нижче ).

Просто майте на увазі, що це відбувається за рахунок процесорів користувача. Це може призвести до завантаження та / або зміни розміру сторінок тривалий час.

Як ми знаємо, це складне питання, яке не підтримується будь-яким поширеним способом між браузерами. Більшість браузерів взагалі не підтримують цю функцію.

У деяких роботах з HTML-повідомленнями, де використовувався вміст користувача, але сценарій недоступний (і навіть CSS не підтримується дуже добре), наступний біт CSS в обгортці навколо нерозміщеного блоку вмісту повинен хоча б дещо допомогти:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Що стосується браузерів на базі Mozilla, згаданий вище файл XBL містить:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

На жаль, Opera 8+, як видається, не подобається жодному з перерахованих вище рішень, тому JavaScript повинен бути рішенням для цих браузерів (наприклад, Mozilla / Firefox.) Ще одне крос-браузерне рішення (JavaScript), яке включає пізніші видання Opera було б використовувати скрипт Хеджера Ванга, знайдений тут: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Інші корисні посилання / думки:

Невідповідна бабла »Архів блогу» Емуляція CSS-обгортки Mozilla / Firefox
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] У Opera немає жодного переносу слів, в IE
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- користувачів / 2004-листопад / 024468.html

CSS Cross Browser Wrap Word

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

Використовуйте стиль word-break:break-all;. Я знаю, що це працює на столах.

Ви маєте на увазі, що в браузерах, які його підтримують, word-wrap: break-wordне працює?

Якщо включено у визначення тіла таблиці стилів , він повинен працювати протягом усього документа.

Якщо переповнення не є хорошим рішенням, лише користувацький JavaScript може штучно розбити довге слово.

Примітка: також існує цей <wbr>тег Word Break . Це дає браузеру місце, де він може розділити лінію вгору. На жаль, <wbr>тег працює не у всіх браузерах, лише у Firefox та Internet Explorer (і Opera з фокусом CSS).

Щойно перевірили IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows та Safari:

word-wrap: break-word;

працює для довгих посилань всередині div з заданою шириною і без переливу, оголошеного в css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Я не бачу проблем із сумісністю

Я щойно дізнався про гіфенатора з цього питання . Це може вирішити проблему.

Після довгих боїв це для мене спрацювало:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Працює в останніх версіях Chrome, Firefox та Opera.

Зауважте, що я виключив багато white-spaceвластивостей, які запропонували інші, - що насправді порушило preвідступ для мене.

Для мене в div без фіксованого розміру та з динамічним вмістом він працював, використовуючи:

display:table;
word-break:break-all;

Повторний вираз в цьому коментарі , це добре, але він додає сором'язливий дефіс лише між групами з 5 символів, що не мають пробілів або дефісів. Це дозволяє останню групу бути набагато довшою, ніж планувалося, оскільки після неї не існує відповідної групи.

Наприклад, це:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... результати в цьому:

abcde­12345678901234

Ось версія, що використовує позитивний пошук, щоб уникнути цієї проблеми:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... з цим результатом:

abcde­12345­67890­1234

Я зазвичай використовую для цієї проблеми рішення 2 встановити різні правила css для IE та інших браузерів:

word-wrap: break-word;

Woks ідеально підходить в IE, але перенесення слів не є стандартною властивістю CSS. Це властивість Microsoft, яка не працює у Firefox.

Для Firefox найкраще робити лише CSS - це встановити правило

overflow: hidden;

для елемента, який містить текст, який потрібно обернути. Він не загортає текст, але приховує частину тексту, яка переходить за межу контейнера . Це може бути приємним рішенням, якщо для вас не важливо відображати весь текст (тобто якщо текст знаходиться всередині <a>тегу)

Оновлення: Робота з цим в CSS напрочуд проста і з низькими накладними витратами, але ви не маєте контролю над тим, де виникають перерви, коли вони робляться. Це нормально, якщо вам все одно, або ваші дані давно буквено-цифрові пробіги без природних перерв. У нас було багато довгих шляхів до файлів, URL-адрес та номерів телефонів, усі вони мають місця, на які значно краще перерватися, ніж інші.

Нашим рішенням було спочатку скористатися заміною регулярного вираження, щоб поставити пробіл із нульовою шириною (& # 8203;) після кожні 15 (скажімо) символів, які не є пробілом або одним із спеціальних символів, де ми воліємо перерви. Потім робимо ще одну заміну, щоб розмістити пробіл із нульовою шириною після цих спеціальних символів.

Пробіли нульової ширини приємні, оскільки їх ніколи не видно на екрані; сором’язливі дефіси були заплутані, коли показували, бо дані мають значні дефіси. Пробіли з нульовою шириною також не включаються при копіюванні тексту з браузера.

Спеціальні символи перерви, які ми використовуємо в даний час, - це косою рискою вперед, косою рисою, комою, підкресленням, @, | та дефісом. Ви б не думали, що вам потрібно буде зробити що-небудь, щоб заохотити зламати після дефісів, але Firefox (принаймні 3,6 і 4) не ламається на дефісах, оточених цифрами (наприклад, номерами телефонів).

Ми також хотіли контролювати кількість символів між штучними перервами на основі наявного місця розташування. Це означало, що регулярний вираз, щоб відповідати довгим безвідривним пробігам, повинен бути динамічним. Це називається дуже багато, і ми не хотіли створювати однакові однакові регулярні вирази з міркувань продуктивності, тому ми використовували простий кеш-регекс, керований виразом регулярного виразів та його прапорами.

Ось код; ви, ймовірно, простір імен функцій в утиліті:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Тест так:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

Оновлення 2: Здається, що простори нульової ширини насправді є включені в скопійований текст , по крайней мере , в деяких випадках, ви просто не можете їх бачити. Очевидно, що заохочувати людей копіювати текст із прихованими символами в ньому - це запрошення мати такі дані, які вводяться в інші програми чи системи, навіть власні, де це може спричинити проблеми. Наприклад, якщо він опинився в базі даних, пошук по ньому може бути невдалим, а рядки пошуку, подібні до цієї, ймовірно, також не вдасться. Використання клавіш зі стрілками для переміщення через такі дані вимагає (справедливо) додаткового натискання клавіші для переміщення по символу, якого ви не бачите, дещо химерно для користувачів, якщо вони помічають.

У закритій системі ви можете відфільтрувати цього персонажа на вході, щоб захистити себе, але це не допомагає іншим програмам і системам.

За всіма словами, ця методика працює добре, але я не впевнений, яким був би найкращий вибір проривного персонажа.

Оновлення 3: Отримати цей символ у даних уже не є теоретичною можливістю, це спостерігається проблема. Користувачі надсилають дані, скопійовані з екрана, вони зберігаються в db, перерви в пошуку, речі сортуються дивно тощо.

Ми зробили дві речі:

1. Написав утиліту, щоб видалити їх із усіх стовпців усіх таблиць у всіх джерелах даних для цього додатка.
2. Додано фільтрування, щоб видалити його до нашого стандартного струнного вхідного процесора, тому він минув час, коли якийсь код його побачить.

Це добре працює, як і сама техніка, але це застереження.

Оновлення 4: ми використовуємо це в контексті, коли дані, подані до цього, можуть бути уникнути HTML. При правильних обставинах він може вставляти проміжки нульової ширини в середині HTML-об'єктів, з цікавими результатами.

Виправлення полягало в тому, щоб додати ampersand до списку символів, на які ми не перебиваємось, наприклад:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Потрібно встановити "макет таблиці: виправлено", щоб робота з обгортанням слів

ГІФЕНАТОР - правильна відповідь (наведена вище). Справжня проблема, що стоїть за вашим питанням, полягає в тому, що веб-браузери все ще (у 2008 році) надзвичайно примітивні, що у них немає функції дефісування. Подивіться, ми все ще на ранніх стадіях використання комп’ютера - треба бути терплячими. Поки дизайнери управляють веб-світом, нам буде важко чекати деяких справжніх корисних нових функцій.

ОНОВЛЕННЯ: Станом на грудень 2011 року, у нас є ще один варіант, з підтримкою цих тегів у FF та Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Я провів декілька базових тестувань, і, здається, працює над останньою версією Mobile Safari і Safari 5.1.1.

Таблиця сумісності: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

Для сумісності з IE 8+ використовуйте:

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Дивіться це тут http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Все, що мені довелося зробити, це застосувати це до стилю контейнера div з заданою шириною.

Використовуй це

word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;

Якщо у вас є це -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

просто перейдіть у вертикальний формат, що містить знаки і використовуйте мінімальну ширину у своєму CSS замість ширини -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Звичайно, якщо ви відображаєте справжні табличні дані, нормально використовувати справжню таблицю, оскільки це семантично правильно, і інформуватимуть людей, що використовують зчитувачі екрана, про те, що повинно бути в таблиці. Завдяки їм для загального планування або нарізання зображень люди будуть лінчувати вас.

Мені довелося зробити наступне, тому що, якби властивості не були оголошені в правильному порядку, вони випадковим чином ламають слова в неправильному місці та без додавання дефісу.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

Спочатку опублікував Енігмо: https://stackoverflow.com/a/14191114

Так, якщо це можливо, встановлення абсолютної ширини та налаштування overflow : autoпрацює добре.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" працює у Firefox 3.5 http://hacks.mozilla.org/2009/06/word-wrap/

Додайте це до cssсвого div:word-wrap: break-word;

зрештою, слово перекриває і перериває, збережіть своє переповнення і подивіться, чи це вирішує вашу проблему. просто змініть дисплей вашого div на:display: inline;

Проста функція (вимагає underscore.js) - заснована на відповіді @porneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

Я написав функцію, яка чудово працює там, де вона вставляє ­в слово x літери для гарного розриву рядків. Усі відповіді тут підтримують не всі браузери та пристрої, але це добре працює за допомогою PHP:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}