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


159

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

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

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

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

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

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

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

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

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

2
В HTML элементы разбиваются после каждого слова, когда этого требует ширина данного элемента. Вы имеете в виду в словах?
Пол Д. Уэйт

@Paul - Нет, мне нужно решение, которое не основано на фиксировании ширины. Проблема в том, что некоторые фразы длиннее и разбиваются автоматически (как вы описываете), а некоторые фразы короче и не ломаются, создавая непоследовательное представление.
Бен

@Paul - Да, вы точно описываете. На самом деле не вредит макету, но он может выглядеть лучше.
Бен

Вы можете использовать межсловный интервал, но это повлияет на все слова. Я думаю, вы не можете обернуть эти слова в элементы span.
Мео

@ Meo - Похоже, спасибо за мысль
Бен

Ответы:


261

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

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


Это определенно лучший ответ imho
Хезад

31
@ToniMichelCaubet Ответ действительно трудно интерпретировать, но он имеет в виду: .parent { word-spacing: 100px; }где 100pxширина родительского элемента. Проблема в том, что это решение не работает, если у вас текучий родитель.
Джон Курлак

5
Просто установите очень высокое значение для расстояния между словами, например, word-spacing: 100000pxи вам не нужно будет беспокоиться о том, что родительский элемент является изменчивым с точки зрения ширины. Установка интервала между словами 100% имела бы смысл (это была бы 100% родительской ширины), но значения, выраженные в процентах, не поддерживаются для этого свойства css.
sboisse

1
Это было очень полезно. Я использовал это в адаптивной ситуации, когда на одной ширине я хочу, чтобы текст на вкладках был перенесен, чтобы они были одинаковой высоты: word-spacing: 2em; а на мобильной ширине я хочу, чтобы они были однострочными:word-spacing: unset;
Будет

1
Это потрясающе. Из года в будущее, спасибо большое :)
Лукас Медина

124

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

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

p { word-spacing: 9999999px; }

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

p { word-spacing: 100vw; }

вот что я постараюсь!
Васкорт

Это отличное решение!
Джо Конлин

Полностью разрывается с & NBSP; хотя.
Мэтт Флетчер

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

@ Онза, можешь поделиться ссылкой на скрипку, показывающей твою проблему?
Дипак Ядав

37

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


Это на самом деле только группирует слова на основе ширины самого длинного слова.
Джеймс Саут

1
Несмотря на то, что это может группировать слова в строке, во многих ситуациях это действительно хорошо работает и не выглядит таким хакерским, как массивный вариант с интервалом между словами.
Дейл

1
Это тот, который отлично сработал для меня, хороший!
Мэтт Флетчер

1
Это не дает никакого результата
jafarbtech

32

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

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

<div>Short
Word</div>

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

div { white-space: pre-line; }

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

<div>
    Short
    Word
</div>

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


Вы должны объяснить, как white-spaceможно ответить на вопрос. Извините, но я не вижу как.
jlgrall

2
Хорошо, статья о хитростях CSS объясняет это полностью, поэтому я подумал, что ссылки будет достаточно, вместо того, чтобы пытаться извергнуть ответ здесь.
Насс

Итак, вы предлагаете помещать реальные разрывы строк в исходном коде и использовать CSS " white-space: pre;" для отображения этих разрывов строк, как <pre>тег? Это может сработать, и разрыв строки должен выглядеть более естественным для переводчиков, чем a <br />. Я постараюсь отредактировать ваш ответ, чтобы добавить его :)
jlgrall

Именно. Ну, на самом деле, white-space: pre-line;возможно , было бы более уместным, так как он игнорирует лишние пробелы в вашем коде. Я обновлю ответ.
Nass

Хорошо, может быть, просто добавьте white-space: pre;для IE 7.
Jlgrall

12

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

Альтернативный метод - присвоить контейнеру ширину 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

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

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

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


Да, я боялся этого. Может сделать это и в PHP, но это кажется уродливым решением. Я думал, что может быть какой-то :first-childтрюк или что-то там ...
Бен

@Steve: нет, в настоящее время селекторы CSS позволяют выбирать только элементы HTML, а не текстовые узлы. Я посмотрел на модуль CSS 3 Text , но там, похоже, нет ничего, что могло бы вызвать разрыв после каждого слова в элементе. Решение Марка - ваша лучшая ставка.
Пол Д. Уэйт

@Paul, @Mark - Если один из вас, ребята, хочет, чтобы представитель, вы могли бы ответить, и я приму его. Я собираюсь отметить это как неотвечаемое (пока) для meta.stackoverflow.com/questions/48013/… .
Бен

Я думаю, что Марк уже сделал это ответом, весь представитель его, насколько мне известно.
Пол Д. Уэйт

@Paul - +1 командный игрок дает парню значок или что-то в этом роде :)
Бен

2

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

Попробуйте дать этому интервалу любое другое CSSсвойство, которое вы можете дать. Скажи свойство, которое может вызватьbrowser reflow
Дипак Ядав

1
перекомпоновка браузера?
Онза

2

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

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

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

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

2

Лучшее решение - 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


-1

В моем случае,

    word-break: break-all;

работал отлично, надеюсь, это поможет любому новому новичку, как я.


-1 от меня, потому что это неправильный ответ. Это разрывает строку в каждом символе, если это необходимо.
Эмоб
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.