Перенос текста в неправильном месте - PullRequest
Новая
       23

Перенос текста в неправильном месте

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

У меня есть текст Application->Welcome, и когда экран становится слишком маленьким, я хочу, чтобы он обрезался до или после стрелки.Но ни одно из значений css word-wrap не делает этого.

Что я хочу сделать, когда экран становится слишком маленьким: 

Application->
Welcome

Что на самом деле происходит, когда экран становится слишком маленьким: 

Application-
>Welcome

Как сделатьтак что перенос происходит либо до, либо после стрелки?

Ответы [ 4 ]

3 голосов
/ 27 сентября 2019

Один из способов - использовать «Неразрывные гифы» (U + 2011) и «ZERO WIDTH SPACE» (U + 200B) для управления поведением перерыва: 

Application​&#x2011>​Welcome

Другой - использоватьфактическая «СТРЕЛКА ВПРАВО» (U + 2192): 

Application​→​Welcome

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

Еще один, для создания <span> элементов с соответствующим white-space CSS.

2 голосов
/ 27 сентября 2019

К сожалению, такая вещь не поддерживается css, но не бойтесь!

У вас есть несколько вариантов под рукой:

  • Добавьте пробел до и / или послестрелка, так что браузер предпочитает разбивать символ пробела, а не на середину стрелки.
  • Добавить символ нулевой ширины (код Unicode U + 200B) вместо пробела.
  • Поместите Application-> и Welcome в разные теги html внутри одного тега.Задайте для этих тегов свойство css, например word-break:none

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

Надеюсь, это поможет!;)

1 голос
/ 27 сентября 2019

Вы можете рассмотреть возможность использования одного Unicode символа. 

Application&#x2192;Welcome
0 голосов
/ 27 сентября 2019

word-wrap определяет перенос / разрыв внутри слова.Я сомневаюсь, что -> будет считаться словом.Вместо этого вам нужно использовать white-space, в частности это значение nowrap. 

Application<span style="white-space: nowrap">-&gt;</span>Welcome

. Или лучшее / более приятное решение - не "строить" стрелку из отдельных символов.Попробуйте использовать символ Unicode СТРЕЛКА ВПРАВО (→) .Если ваш HTML не имеет кодировки UTF-8, его можно вставить с помощью сущности &rarr;.

...