文本在错误的位置换行

Question

我有文本 Application->Welcome，当屏幕变得太小时，我希望它在箭头之前或之后被截断。但是 css word-wrap 值中的 none 可以做到这一点。

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

Application->
Welcome

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

Application-
>Welcome

如何才能使换行发生在箭头之前或之后？

Answer 1

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

Application&#x2192;Welcome

Answer 2

一种方法是使用 'NON-BREAKING HYPHEN' (U+2011) 和 'ZERO WIDTH SPACE' (U+200B) 来控制中断行为：

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

另一种是使用实际的'RIGHTWARDS ARROW' (U+2192):

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

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

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

Answer 3

word-wrap 决定一个字里面的 wrapping/breaking。我怀疑 -> 会被认为是一个词。您需要使用 white-space 来代替，特别是它的值 nowrap.

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

或者 better/nicer 解决方案不会 "build" 箭头超出单独的字符。考虑使用 Unicode 字符 RIGHTWARDS ARROW (→)。如果您的 HTML 没有 UTF-8 编码，它可以与实体 →.

一起插入

Answer 4

不幸的是 css 不支持这样的事情，但不要害怕！

您手头有几个选择：

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

有lengthy discussion与此问题相关，但不适应一点就没有办法做你想做的事。

希望对您有所帮助！ ;)

Text wrapping in the wrong place