文本换行在错误的位置答案

【问题标题】：Text wrapping in the wrong place文本换行在错误的位置
【发布时间】：2020-01-27 15:13:36
【问题描述】：

我有文字Application->Welcome，当屏幕变得太小时，我希望它在箭头之前或之后切断。但是没有一个 css word-wrap 值这样做。

当屏幕变得太小时我想发生什么：

Application->
Welcome

当屏幕变得太小时实际会发生什么：

Application-
>Welcome

我怎样才能使换行发生在箭头之前或之后？

【问题讨论】：

【解决方案1】：

一种方法是使用“NON-BREAKING HYPHEN”（U+2011）和“零宽度空间”（U+200B）来控制中断行为：

Application&#x200B;&#x2011>&#x200B;Welcome

另一个是使用实际的“向右箭头”（U+2192）：

Application&#x200B;&#x2192;&#x200B;Welcome

插入箭头和文字之间的 ZWS 确保了可以断线的地方，而不会影响您的布局。

还有一个，用适当的white-space CSS 创建<span> 元素。

【讨论】：

【解决方案2】：

很遗憾这样的事情css不支持，但不要害怕！

您有几个选择：

在箭头之前和/或之后添加一个空格，以便浏览器更喜欢在空格字符而不是箭头中间进行中断。
添加一个零宽度字符（U+200B unicode 代码）而不是空格。
将Application-> 和Welcome 放在不同的html 标记中，在一个标记内。将这些标签设置为具有 word-break:none 之类的 css 属性

有lengthy discussion 与此问题相关，但如果不稍作调整，就无法做你想做的事。

希望这会有所帮助！ ;)

【讨论】：

【解决方案3】：

您可能需要考虑使用单个 Unicode 字符。

Application&amp;#x2192;Welcome

【讨论】：

【解决方案4】：

word-wrap 确定一个单词内的换行/分行。我怀疑-> 会被认为是一个词。您需要改用white-space，特别是它的值nowrap。

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

或者更好/更好的解决方案不会用单独的字符“构建”箭头。考虑使用 Unicode 字符 RIGHTWARDS ARROW (→)。如果您的 HTML 没有 UTF-8 编码，则可以使用实体 &rarr; 插入它。

【讨论】：