Чи може CSS змусити переривати рядок після кожного слова в елементі?

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

На жаль, власник не є комп’ютерним хлопцем, тому, якщо він побачить, foo<br />barє шанс, що-небудь змінить дані, коли він перекладає.

Чи є рішення CSS (окрім зміни ширини), яке слід застосувати до елемента, який би порушувався після кожного слова?

(Я знаю, що я можу це зробити в PHP, але мені цікаво, чи є витончений трюк, про який я не знаю в CSS, щоб виконати те саме, можливо, в особливостях CJK.)

EDIT

Я спробую скласти схему того, що відбувається:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

Довге слово розривається автоматично, коротке - ні. Я хочу, щоб це виглядало так:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

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

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

де <parent-width>ширина батьківського елемента (або довільне високе значення, яке не вкладається в один рядок). Таким чином ви можете бути впевнені, що навіть після однієї літери є навіть перерва рядка. Працює з Chrome / FF / Opera / IE7 + (і, мабуть, навіть IE6, оскільки він також підтримує інтервал між словами).

Відповідь, надана @HursVanBloob, працює лише з батьківським контейнером фіксованої ширини, але не виходить у випадку контейнерів із шириною рідини .

Я спробував багато властивостей, але нічого не вийшло, як очікувалося. Нарешті я прийшов до висновку, що надання word-spacingдуже величезної цінності працює прекрасно.

p { word-spacing: 9999999px; }

або, для сучасних браузерів ви можете використовувати vwблок CSS (ширина візуалу у% від розміру екрана).

p { word-spacing: 100vw; }

Альтернативне рішення описується в Окремому реченні до одного слова на рядок шляхом застосування display:table-caption;до елемента

Спробуйте використовувати white-space: pre-line;. Він створює розрив рядків, де б не з'явився перерив рядка в коді, але ігнорує зайвий пробіл (вкладки та пробіли тощо).

Спочатку напишіть свої слова в окремі рядки у своєму коді:

<div>Short
Word</div>

Потім застосуйте стиль до елемента, що містить слова.

div { white-space: pre-line; }

Будьте уважні, однак кожен перерив рядка в коді всередині елемента створюватиме розрив рядка. Отже, написання наступного результату призведе до додаткового розриву рядків перед першим словом та після останнього слова:

<div>
    Short
    Word
</div>

Існує чудова стаття про фокуси CSS, що пояснює інші атрибути пробілу.

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

Альтернативний метод - надати контейнеру ширину 0 і переконатися, що переповнення видно. Тоді кожне слово перепливе з нього і опиниться на своєму рядку.

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Або ви можете скористатись одним із нових запропонованих widthзначень за умови, що вони ще існують до того моменту, коли ви це прочитаєте.

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Ви не можете орієнтуватися на кожне слово в CSS. Однак, трохи jQuery ви, напевно, могли.

За допомогою jQuery ви можете обернути кожне слово в a, <span>а потім набір CSS, на display:blockякому буде розміщено його у своєму рядку.

Теоретично звичайно: P

https://jsfiddle.net/bm3Lfcod/1/

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

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

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

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

АБО за допомогою CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

Найкраще рішення - word-spacingвласність.

Додайте <p>в контейнер із певним розміром (приклад 300px) і після цього потрібно додати цей розмір як значення в інтервалі між словами.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

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

Ось приклад Codepen

У моєму випадку

    word-break: break-all;

працював досконало, сподіваюся, що це допоможе будь-якому іншому новачку, як я.