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

Гаразд, це нас справді бентежить. У мене є такий вміст у діві, як:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Однак вміст переповнює DIV (як очікувалося), оскільки "слово" занадто довге.

Як я можу змусити браузер "зламати" слово там, де необхідно, щоб вмістити весь вміст всередині?

Використовуйте word-wrap:break-word;

Він навіть працює в IE6, що є приємним сюрпризом.

word-wrap: break-wordбуло замінено, overflow-wrap: break-word;що працює у кожному сучасному браузері. IE, будучи мертвим браузером, назавжди покладеться на застаріле та нестандартне word-wrap.

Існуючі на word-wrapсьогодні застосування все ще працюють, оскільки це псевдонім для overflow-wrapспецифікації.

Я не впевнений у сумісності браузера

word-break: break-all;

Також ви можете використовувати <wbr>тег

<wbr>(слово "перерва") означає: "Браузер може вставити тут перерву рядка, якщо він бажає." Оскільки браузер не вважає необхідним розрив рядка, нічого не відбувається.

Це може бути додано до прийнятої відповіді для рішення "крос-браузер".

Джерела:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

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

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Я просто гуглював ту саму проблему і опублікував своє остаточне рішення ТУТ . Це стосується і цього питання.

Ви можете легко це зробити з дівом, надавши йому стиль word-wrap: break-word(і, можливо, вам також знадобиться встановити його ширину).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Тим НЕ менше, для таблиць , необхідно також застосовувати: table-layout: fixed. Це означає, що ширини стовпців більше не є текучими, але визначаються виходячи з ширини стовпців лише у першому рядку (або через задані ширини). Детальніше читайте тут .

Приклад коду:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​- це сутність HTML для символу Unicode, який називається простором нульової ширини (ZWSP), який є невидимим символом, який визначає можливість розриву рядків. Аналогічно мета дефісу полягає у визначенні можливості розриву рядків у межах слова.

Виявив, що використання наведених нижче даних працює у більшості основних браузерів (Chrome, IE, Safari iOS / OSX), окрім Firefox (v50.0.2), коли використовується flexbox та покладається на нього width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Примітка. Можливо, вам потрібно буде додати префікси постачальника веб-переглядача, якщо ви не використовуєте автоматичний коректор.

Ще одна річ, на яку слід стежити - використання тексту  для пробілів може спричинити розриви рядків у середині слова.

CSS word-wrap:break-word; , протестований у FireFox 3.6.3

Я вирішив свою проблему з кодом нижче.

display: table-caption;

Видаліть white-space: nowrap, якщо вони є.

Реалізація:

white-space: inherit;
word-break: break-word;

Пробіл зберігається браузером. Текст буде обгортати при необхідності та на перервах рядків

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Від MDN :

В overflow-wrapвизначає CSS властивості або НЕ браузер повинен вставити розриви рядків усередині слів , щоб запобігти текст від переповнення його вмісту вікна.

На відміну від word-break, overflow-wrapбуде створено перерву лише у тому випадку, якщо ціле слово не може бути розміщене у власному рядку без переповнення.

Отже, ви можете використовувати:

overflow-wrap: break-word;

Чи можу я використовувати ?

Спочатку слід визначити ширину вашого елемента. Наприклад:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

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

Як згадується у відповіді @ davidcondrey, є не лише ZWSP, а й SHY, ­ ­які можна використовувати в дуже довгих побудованих словах (думайте, німецькою чи голландською мовами), які повинні бути зламані на тому місці, куди ви хочете. Невидимий, але це дає дефіс в той момент, коли він потрібен, таким чином, зберігаючи як слово, так і рядки, заповнені на все можливе.

Таким чином можна відзначити слово luchthavenpolitieagent , lucht­haven­politie­agentяке дає довші частини, ніж склади цього слова.
Хоча я ніколи не читав нічого офіційного з цього приводу, цим м'яким дефісам вдається отримати більш високий пріоритет у браузерах, ніж офіційні дефіси в окремих словах конструкції ( якщо вони взагалі мають деяке розширення для цього).
На практиці жоден браузер не здатний сам зламати таке довге, побудоване слово; на менших екранах, що призводить до нового рядка для нього, а в деяких випадках навіть до одного слова (наприклад, коли два цих побудованих слова слідують далі).

FYI: це голландський працівник аеропорту

word-break: normal здається, краще використовувати, ніж word-break: break-word, оскільки початкові перерви в break-word, такі як EN

word-break: normal

Зробити це:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

просто спробуйте це в нашому стилі

white-space: normal;