Может ли CSS заставить прерывание строки после каждого слова в элементе?

Я создаю многоязычный сайт, а владелец помогает мне с некоторыми переводами. Некоторые отображаемые фразы нуждаются в разрыве строк, чтобы поддерживать стиль сайта.

К сожалению, владелец не является компьютерным парнем, поэтому, если он увидит foo<br />bar, то шанс, что он каким-то образом изменит данные при переводе.

Есть ли решение CSS (помимо изменения ширины) для применения к элементу, который разбивается после каждого слова?

(Я знаю, что могу сделать это на PHP, но мне интересно, есть ли замечательный трюк, о котором я не знаю в CSS, чтобы выполнить одно и то же, возможно, в функциях CJK.)

ИЗМЕНИТЬ

Я попытаюсь рассказать о том, что происходит:

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

Длинное слово ломается автоматически, короткое слово - нет. Я хочу, чтобы это выглядело так:

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

Ответы

Ответ 1

использование

.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, так как он также поддерживает межсловное пространство).

Ответ 2

Ответ, заданный @HursVanBloob, работает только с родительским контейнером с фиксированной шириной, но не работает в случае контейнеров шириной жидкости.

Я пробовал много свойств, но ничего не работало, как ожидалось. Наконец, я пришел к выводу, что предоставление word-spacing очень большого значения отлично работает.

p { word-spacing: 9999999px; }

или для современных браузеров вы можете использовать блок CSS vw (визуальная ширина в% от размера экрана).

p { word-spacing: 100vw; }

Ответ 4

Попробуйте использовать white-space: pre-line;. Он создает разрыв строки везде, где в коде появляется разрыв строки, но игнорирует лишние пробелы (вкладки и пробелы и т.д.).

Сначала напишите свои слова по отдельным строкам в вашем коде:

<div>Short
Word</div>

Затем примените стиль к элементу, содержащему слова.

div { white-space: pre-line; }

Будьте осторожны, хотя каждая строка разбивается на код внутри элемента, создавая разрыв строки. Поэтому запись следующего приведет к дополнительному прерыванию строки перед первым словом и после последнего слова:

<div>
    Short
    Word
</div>

Там отличная статья о CSS-трюках, объясняющая другие атрибуты белого пространства.

Ответ 5

Вы не можете настроить каждое слово в CSS. Однако с небольшим количеством jQuery вы, вероятно, могли бы.

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

В теории, конечно: P

Ответ 6

Если вы хотите иметь возможность выбирать из разных решений, помимо данных ответов...

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

div {
  width: 0;
  overflow: visible;
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Ответ 7

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;
}

Ответ 8

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

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

ИЛИ используя CSS:

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