在响应式设计中指定HTML文本中的首选换行符

Question

我想知道是否有一个CSS或javascript魔法可以在html文本中放置一个标记，以便浏览器知道当文本变得狭窄时，换行创建的位置。有这样的事吗？

Answer 1

我认为这很有效：

span.line {
  display: inline-block;
}

<p>
  <span class="line">This text should break</span>
  <span class="line">after the word "break"</span>
</p>

当空间不足时，文本仍会在其他地方中断：

open demo

Answer 2

<wbr> tag（分词）是您要找的吗？

它不是CSS或JS，但可以直接放在HTML

中

Answer 3

您可以将文本放入跨距并防止其中的换行符。这种方式换行只能在两个跨度之间发生：

<span style="white-space:nowrap">I won't break.</span> 
<!-- this is a breaking point --> 
<span style="white-space:nowrap">I won't break either.</span>

Answer 4

不幸的是，HTML或CSS中没有办法表示某些允许的换行符比其他换行符更优选。如果有的话，我们可以期待在CSS3 Text模块中找到它，但它当前的草案没有那样 - 只是控制允许断行点的确定方式。

你可以做的是禁止在通常允许的地方换行。通常，空格意味着换行机会，但是如果需要，可以使用不间断空格（可以写为 ），禁止这样做。

例如，如果你有一个标题文字，如“横跨爱尔兰海的桥梁和其他四个惊人的计划”，那么你可能会说最好的断线机会是在“和”之后，这是一个很好的机会。在“爱尔兰”之后，“相当糟糕（虽然允许）”，等等。但是你不能在HTML或CSS中这样做，也不能在排版程序中这样做。您可以允许或禁止休息，例如与<h1>A&nbsp;bridge across the&nbsp;Irish&nbsp;Sea and four&nbsp;other amazing&nbsp;plans</h1>中一样。对于标题和标题，这可能是有意义的，即使这意味着您考虑每个空间并决定是否使其不破坏。

Answer 5

我当然明白你为什么要这样，而且有时我曾经看过一个布局，起初想过，想要同样的事情。

但如果我没有提到这样做会导致一些主要的流量问题，我就不会做出应有的正义。

你有一个快速响应的网站吗？如果是这样，只需更改浏览器上视口的大小就可以将单词破碎的文本转换成看起来很糟糕的内容。

即使您没有响应式网站，并且使用像素完美的设计，所有人需要做的就是改变字体的大小，一切都会变得疯狂。

我会重新考虑这个决定。不过我的意见只是。