文字换行在错误的位置

Question

我有文本Application->Welcome，并且当屏幕变得太小时，我希望它在箭头之前或之后被切断。但是，css word-wrap值均不执行此操作。

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

Application->
Welcome

当屏幕变得太小时实际发生的事情：

Application-
>Welcome

我如何做到使包裹在箭头之前或之后？

Answer 1

一种方法是使用“不间断连字符”（U + 2011）  和“零宽度空间”（U + 200B）来控制中断行为：

Application​&#x2011>​Welcome

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

Application​→​Welcome

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

另外，用适当的<span> CSS创建white-space元素。

Answer 2

不幸的是，css不支持这种情况，但请不要担心！

您手边有几个选择：

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

有lengthy discussion与此问题有关，但是没有一点适应就无法做您想做的事情。

希望这会有所帮助！ ;）

Answer 3

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

Application→Welcome

Answer 4

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

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

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