如何用CSS3实现H1文本指定换行：首词单独占一行

首先得说明：你用的break-word（现在标准里对应overflow-wrap: break-word）本来就不是干这个的——它是用来让超长单词在容器边缘强制拆分换行的，没法控制指定位置的换行，所以没用很正常。

下面给你几种可行的方案：

方案1：直接改HTML加<br>（最简单） #

这是最直接的方式，在需要换行的位置插个<br>标签就行：

<h1>one<br>two three</h1>

方案2：用CSS配合小结构调整（不用<br>） #

如果不想用<br>，给要单独成行的内容套个<span>，再把这个<span>设成块级元素：

<h1><span>one</span> two three</h1>

h1 span {
  display: block;
}

方案3：纯CSS硬控宽度（不用改HTML，但兼容性差） #

完全不想碰HTML的话，可以给H1设一个刚好能放下"one"的宽度，让后面的内容自动换行：

h1 {
  /* 自己根据字体、字号调宽度，比如你用的字体里"one"占3.5em就设这个值 */
  width: 3.5em;
  white-space: normal;
}

缺点很明显：换个字体或字号就得重新调宽度，灵活性差。

方案4：固定内容用伪元素替换（仅内容不变时用） #

如果这个H1的内容永远是"one two three"，可以用伪元素替换原有内容，加换行符实现：

h1 {
  visibility: hidden;
}
h1::after {
  content: "one\A two three";
  visibility: visible;
  display: block;
  white-space: pre;
}

这里\A代表换行符，white-space: pre是让换行符生效的关键。

内容的提问来源于stack exchange，提问作者Lewan