CSS - контроль пробелов по сравнению с пробелами - PullRequest
Новая
       76

CSS - контроль пробелов по сравнению с пробелами

4 голосов
/ 25 сентября 2019

У меня есть текст, который я не могу контролировать, но хочу управлять отображением.

т.е. мой код: <div>{{ incoming_text }}</div>

Это также всреда, в которой я не могу сделать ничего необычного с incoming_text (например, подстановка / замена строки).

Когда текст выглядит следующим образом: «пойман / в затруднении / загнан в угол (причастие)», обертка (в узком месте)widths) выглядит следующим образом: 

trapped/in
difficulty/cornered
(participle)

Есть ли способ контролировать это так, чтобы текст вместо этого переносился: 

trapped/
in difficulty/
cornered
(participle)

Проблема заключается в том, что слово переносится между 'in' и«сложность» на самом деле сбивает с толку значение этого, то есть его нужно хранить вместе.

Так что что-то вроде следующего также будет приемлемо: 

trapped/in difficu-
lty/cornered (part-
iciple)

1 Ответ

0 голосов
/ 25 сентября 2019

Это также в среде, где я не могу делать что-то необычное с входящим_текстом (например, подстановка / замена строк).

В отсутствие этого условия вы можете заменить / на <span class="separator">/<span> используя javascript.

Затем вы можете добавить ::after псевдоэлемент, который вводит новую строку: 

.separator::after {
  content: '\00000a';
  white-space: pre;
}

Но я почти уверен, что невозможно использовать один символ / как селектор CSS, без включения его сначала в элемент <span>.

Я смотрел MDN на новые псевдоклассы, такие как :where и :is, ноничто - даже в последней версии CSS - не дает доступа к текстовому узлу.

...