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

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

135 голосов
/ 18 ноября 2010

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

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

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

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

РЕДАКТИРОВАТЬ

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

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

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

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

Ответы [ 8 ]

241 голосов
/ 31 мая 2012

Используйте 

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

92 голосов
/ 27 мая 2014

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }
31 голосов
/ 08 января 2015

Альтернативное решение описано в Отдельное предложение по одному слову в строке , применяя display:table-caption; к элементу

30 голосов
/ 03 ноября 2012

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

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

<div>Short
Word</div>

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

div { white-space: pre-line; }

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

<div>
    Short
    Word
</div>

Есть отличная статья о CSS Tricks , объясняющая другие атрибуты пробела.

5 голосов
/ 21 января 2018

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

Альтернативный метод - задать для контейнера ширину 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>
4 голосов
/ 18 ноября 2010

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

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

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

1 голос
/ 09 января 2019

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

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

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

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>
1 голос
/ 05 апреля 2017

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