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

发布于 2025-01-16 19:25:50 字数 991 浏览 1 评论 0 原文

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

这是一个例子。三种写法只要有空间就占一行。

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

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

，我希望它在 → 之前中断。方法 A 失败，而 B 和 C 成功。

每个选项有时都会失败；我无法在所有情况下都实现我想要的中断行为。但也许我错过了一些东西。我怎样才能更具体地了解何时何地休息？

原文

HTML5 has some great tools for controlling optional line breaks: line break opportunity , non-breaking space , soft break , and zero-width space . As far as I can tell, optional line breaks always occurs closest to where the line would overflow (on the right for left-to-right languages). But what if I'd prefer for optional breaks to start on the left?

Here's an example. Three ways of writing it take one line if there's room.

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

If "Noise. Signal→Exit" breaks in one place, I want the break to happen after .. Approach A succeeds, where approaches B and C fail.

If it breaks at two places, I want it to break at before →. Approach A fails, where B and C succeed.

Each option fails sometimes; I can't great the break behavior I want in all circumstances. But perhaps I’m missing something. How can I be more specific about when I where and when breaks to occur?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落叶缤纷 2025-01-23 19:25:50

您可以将想要保持在一起的文本部分（包括）包装在设置 display: inline- 的中。块。

您的代码将是：
噪声。信号→退出

如下所示：

.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>

You can wrap the part of the text you want to stay together (including the ) in a  that sets display: inline-block.

Your code would be:
Noise.Signal→Exit

As can be seen in the following:

.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>

回复收藏 0 原文

~没有更多了~