优先考虑 HTML/CSS 中的可选换行符

Question

HTML5 有一些用于控制可选换行符的好工具：换行机会 、不换行 space  、软换行 和零宽度 space 。据我所知，可选的换行符总是出现在最接近该行溢出的地方（对于从左到右的语言，在右侧）。但是，如果我希望可选的休息时间从左侧开始怎么办？

这是一个例子。三种写法占一行

Noise. Signal→Exit            // A
Noise. Signal<wbr>→Exit       // B
Noise.<wbr> Signal<wbr>→Exit  // C

如果“Noise.Signal→Exit”在一处中断，我希望中断发生在.之后。方法 A 成功，而方法 B 和 C 失败。

✿

如果它在两个地方断开，我希望它在 → 之前断开。方法 A 失败，而 B 和 C 成功。

每个选项有时都会失败；在所有情况下，我都无法实现我想要的中断行为。但也许我遗漏了什么。我怎样才能更具体地说明何时何地发生休息？

Answer 1

您可以将要放在一起的文本部分（包括 ）包裹在设置 display: inline-block.

的  中

您的代码将是：
Noise.Signal→Exit

如下所示：

.one {
  width: 150px;
}

.two {
  width: 100px;
}

.three {
  width: 50px;
}

span {
  display: inline-block;
}

<div class="one">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

<br />

<div class="two">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

<br />

<div class="three">
  Noise.<wbr><span>Signal<wbr>→Exit</span>
</div>

优先考虑 HTML/CSS 中的可选换行符

Prioritize optional line breaks in HTML/CSS

html

css

line-breaks

word-wrap