是否有 <wbr> 等效标签影响整个句子而不是单个单词？

Question

HTML 标签 <wbr> 会在屏幕小导致自动换行的情况下打断一个单词。

但是有没有一个标签可以用来在小屏幕的情况下在特定点上中断和换行句子的文本？

我的问题上的 CSS 标签可能无关紧要，但我认为也许有人可以使用 CSS.

实施解决方案

Answer 1

wbr.mobile {
    display: none;
}
@media (max-width: 800px) {
    wbr.mobile {
        display: initial;
    }
}

只需添加 class mobile 即可。

来自提问者的编辑：

对我有用的代码如下：

br {
  display: none;
}
@media (max-width: 800px) {
  br {
      display: initial;
  }
}

<p class="br">There is nothing impossible<br> to him who will try.</p>

我将 wbr 更改为 br，因为正如我在问题中解释的那样，我想模拟 wbr 对整个句子的影响，而不仅仅是单词。而且我认为媒体查询不会改变行为或 HTML 标签。

其次，我只使用了 br 而不是 br.mobile，因为每当我试图使用 class="br mobile" 引用回 br.mobile 时，我都做不到。这可能是我的错误。

此外，这种解决方案会影响页面中的每个 <br>，所以我想必须对 ID 进行更多细化才能影响特定段落。

Answer 2

我通常使用 Non-breaking spaces 来控制我的句子中断的地方。通过更改浏览器 window 大小进行试验。

<div>The quick brown fox jumped over the lazy sleeping dog, only&nbsp;to&nbsp;find&nbsp;that&nbsp;the cat&nbsp;had&nbsp;jumped&nbsp;over&nbsp;the&nbsp;moon.</div>

是否有 <wbr> 等效标签影响整个句子而不是单个单词？

Is there a <wbr> equivalent tag to affect whole sentences instead of just single words?

css

media-queries

responsive-design

display