如何在HTML表格<th>表头内添加换行实现文本分行显示

实现方案 #

方案1：直接插入换行标签（修改成本最低） #

直接在两个单词之间插入<br>换行标签，搭配text-transform: uppercase属性实现全大写效果，修改后代码如下：

<th class="col-xs-2 text-left" style="text-transform: uppercase;">Test<br>Label</th>

如果不想使用行内样式，可以给当前<th>新增自定义类，在全局样式表中统一定义大写规则。

方案2：纯CSS实现（无需修改原有文本内容） #

如果不希望改动HTML内的原有文本，可以通过CSS规则强制换行，首先给<th>新增自定义类：

<th class="col-xs-2 text-left split-header">Test Label</th>

再添加对应的CSS样式：

.split-header {
  text-transform: uppercase;
  /* 给单词间设置超大间距，强制第二个单词换行 */
  word-spacing: 9999px;
  /* 如果你的<th>宽度固定，也可以用宽度限制替代上面的word-spacing：
  width: 4em;
  word-wrap: break-word;
  */
}

方案3：span标签分隔（可维护性最高） #

把两个词分别用span标签包裹，设置span为块级元素，后续可以单独调整两行文本的字号、间距等样式：

<th class="col-xs-2 text-left">
  <span>TEST</span>
  <span>LABEL</span>
</th>

对应CSS规则：

th span {
  display: block;
}

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