CSS如何避免姓名的名与姓被换行拆分？

要让“Eli Freedman”作为整体换行、不被拆成两行，你可以试试以下方法：

• 先把姓名用<span>标签包裹起来，示例代码：

  <span class="full-name">Eli Freedman</span>
  

• 给这个类添加CSS样式，强制内部文本不换行：

  .full-name {
    white-space: nowrap;
  }
  

这样当所在行空间不足时，整个姓名块会直接移到下一行，不会被拆分。

你之前用的word-wrap: break-word之所以无效，是因为这个属性的作用是允许长单词在任意位置拆分换行，和你“保持姓名整体”的需求完全相反，所以达不到预期效果。

如果不想额外添加标签，也可以用display: inline-block属性，同样能让姓名作为一个整体处理：

.full-name {
  display: inline-block;
}

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