在响应式设计中指定 HTML 文本中的首选换行点 [重复]

Posted 2023-03-06

【中文标题】在响应式设计中指定 HTML 文本中的首选换行点 [重复]

【英文标题】：Specifying a preferred line break point in HTML text in a responsive design [duplicate]

【发布时间】：2013-08-15 20:31:34

【问题描述】：

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

【问题讨论】：

问题的标题要求潜在换行点，而正文要求优先级的换行，这似乎意味着首选 换行点（在某些文本中的换行点中）。两个相当不同但相关的问题。

+1 表示您的问题，因为我认为您的措辞方式更好地说明了问题。

<p style="display:inline-block;white-space:nowrap">Sample Test one <wbr> Sample Text two</p>

一个相关的功能是连字符提示，unicode U+00AD SOFT HYPHEN 或 ­在 HTML 中。这可以作为对浏览器在进行换行时建议在长单词中使用连字符的提示。不是一个答案，但我想我已经提到了它，因为它可能对一些被这个问题吸引的读者有所帮助。

【参考方案1】：

<wbr> tag（断字）是您要查找的吗？

不是CSS也不是JS，可以直接放在HTML里

【讨论】：

+1 但 IE 来袭了！

它不完全符合我的要求。 <wbr> 抢先在一个单词中换行，我正在寻找一种可以在单词之间换行的解决方案。

虽然它被称为分词，但它所做的只是告诉浏览器在需要时在哪里放置分词，而不是默认到最后一个适合的词。

这确实是 IMO 最简单/最好的解决方案。投票赞成！

<wbr> 只是在必要时为浏览器提供另一个插入换行符的位置。它不会导致那个地方比其他这样的地方更受欢迎。例如，如果内容包含空格，浏览器可能会选择在其中一个而不是<wbr>处插入换行符。

【参考方案2】：

我完全理解你为什么想要这个，而且我肯定有几次看过一个布局，起初想，想要同样的东西。

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

您有响应式网站吗？如果是这样，只需更改浏览器上视口的大小即可将漂亮的断字文本行变成看起来很糟糕的东西。

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

我会重新考虑这个决定。不过，这只是我的看法。

【讨论】：

你描述的正是我们想要这个能力的原因，而不是我们不想要的原因。

【参考方案3】：

不幸的是，在 HTML 或 CSS 中没有办法表示某些允许的换行点比其他的更可取。如果有的话，我们可以在 CSS3 Text 模块中找到它，但它的当前草案没有这样的东西——只是控制如何确定允许的换行点的方法。

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

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

【讨论】：

这个答案不是真的。有办法，看我的回答；）

你可以使用 0-width 空间 ​与 &nbsp 完全相反。可以使用您的解决方案

旁注：​ 如果在 标签内，则会被忽略

【参考方案4】：

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

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

【参考方案5】：

我认为这很有效：

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

【讨论】：

完美。比原来的答案好得多，因为它不会在超小屏幕尺寸下中断

这在大屏幕上效果很好，但对于小屏幕，动态字体大小在任何地方都可以使用除了这些 display:inline-block 部分，所以它看起来很小