如何自动控制中英文的换行与不换行?

5 min read

强制自动中、英文换行:

例子1:在HTML中,可以使用<br>标签来进行强制换行,它会在任何字符(包括英文)的前后进行换行。如下所示:

<p>这是一个段落的内容。这是第一行。<br>这是第二行。</p>

效果如下:

这是一个段落的内容。这是第一行。
这是第二行。

例子2:在CSS中,可以使用word-wrapword-break属性来控制文本的换行方式。如下所示:

p {
  word-wrap: break-word;  /*在单词内允许断行*/
  word-break: break-all;  /*在单词外强制断行*/
}

效果如下:

这是一个段落的内容。
这是第一行。这是第
二行。

强制不换行:

例子1:在HTML中,可以使用<nobr>标签来表示不进行换行。如下所示:

<p>这是一个<nobr>非常长的单词非常长的单词非常长的单词非常长的单词非常长的单词</nobr>,但是它不会换行。</p>

效果如下:

这是一个非常长的单词非常长的单词非常长的单词非常长的单词非常长的单词,但是它不会换行。

例子2:在CSS中,可以使用white-space属性来控制空白符的处理方式,其中nowrap表示不换行。如下所示:

p {
  white-space: nowrap;
}

效果如下:

这是一个非常长的单词非常长的单词非常长的单词非常长的单词非常长的单词,但是它不会换行。