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

我想知道是否有一个 CSS 或者 javascript 魔术可以在 html 文本中放置一个标记，这样浏览器就可以知道当文本受到限制时在哪里创建分行符。有这种东西吗？

90084 次浏览
小开

你在寻找的是 <wbr>标签(断字符)吗？

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

小开

我完全理解你为什么想要这个，当然有很多次我看到一个布局，第一个想法，想要同样的东西。

但是如果我没有提到这样做会导致一些主要的词流问题，那么我就没有做到应有的公正。

你有一个响应网站吗？如果是这样的话，仅仅改变浏览器视窗的大小就可以把一行看起来不错的断字文本变成看起来很糟糕的东西。

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

我会重新考虑这个决定，但这只是我个人的意见。

小开

不幸的是，在 HTML 或 CSS 中没有办法表示一些允许的断行点比另一些更好。如果有的话，我们可以期望在 CSS3课本模块中找到它，但是它当前的草案没有类似的东西——只是控制如何确定允许的断线点的方法。

可以所做的就是在正常情况下允许断线的地方禁止断线。通常，空格意味着有换行的机会，但是使用不换行空格(如果需要，可以将其写成 &nbsp;)则禁止这样做。

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

小开

您可以将文本放入跨度中，并防止其中出现断行。这样，断线只能发生在两个跨度之间:

<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>
小开
最佳答案

我认为这种方法非常有效:

span.line {
display: inline-block;
}



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

当没有足够的空间时，案文仍在其他地方断开:

screenshot

公开演示


提交答案