在响应式设计中指定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>

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

开放演示

Answer 2

是<wbr>标签(字符),你在找什么？

它不是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>.对于标题和标题,这可能是有意义的,即使这意味着您考虑每个空间并决定是否使其不破坏.