是否有一个 等效标记来影响整个句子而不仅仅是单个单词？答案

【问题标题】：Is there a equivalent tag to affect whole sentences instead of just single words?是否有一个 等效标记来影响整个句子而不仅仅是单个单词？
【发布时间】：2020-04-17 02:25:18
【问题描述】：

HTML 标记 在自动换行的情况下因屏幕小而分词。

但是在小屏幕的情况下，是否有一个标签可以用来在特定点打破和换行句子的文本？

我的问题上的 CSS 标记可能无关紧要，但我认为也许有人可以使用 CSS 实现解决方案。

【问题讨论】：

你还不能用wbr吗？我可能没有正确理解您的问题。
你不能只使用
吗？不知道我是否理解你的问题。
想象一个 10 个单词的句子，句子中间有一个 wbr 标签。根据屏幕尺寸，在一个设备上，第一行有 9 个字，第二行有一个字。在另一个设备中，第一行可能有 8 个单词，第二行可能有 2 个单词。等等。
br 和 br/ 默认拆分句子，而不是在页面加载到屏幕较小的设备上时。
您可以添加一个将其隐藏在较大显示器上的类。

标签： css responsive-design media-queries display

【解决方案1】：

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

只需将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 时，我都做不到。这可能是我的错误。

同样这种解决方式会影响页面中的每个 ，所以我想必须对 ID 进行更多改进才能影响特定段落。

【讨论】：

好主意！感谢您向我介绍媒体查询，我完全不知道它们。然而，对于我的情况，我必须进行一些更改才能工作，所以我将在接受答案之前进行编辑（仅附加我的版本）。
好的，希望对您有所帮助！有一些非常酷的 CSS 功能相对较新（

【解决方案2】：

我通常使用Non-breaking spaces 来控制我的句子中断的位置。通过更改浏览器窗口大小进行实验。

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

【讨论】：