如何让td内的span元素换行而非在文本下方溢出？

嘿，我明白你想要的效果——让Payment Type:和后面的付款类型文本分两行显示，而不是挤在同一行或者出现溢出。针对你给出的HTML结构，这里有几个简单好用的解决方案：

方法1：把span转为块级元素（最推荐） #

span默认是行内元素，只要给它设置display: block，就能让它单独占一行：

.payment-type {
  display: block;
}

这个方法干净利落，只针对目标元素修改，不会影响其他布局。

方法2：直接在HTML里加换行标签 #

如果你不想动CSS，直接在标签和span之间插入<br>就行：

<td class="payment-type-label">Payment Type: <br><span class="payment-type">Computer Payment</span></td>

这种方式更直接，适合快速调整单个元素的排版需求。

方法3：用Flex布局控制父元素排版 #

如果以后可能需要调整更多子元素的排列方式，可以给父元素.payment-type-label设置垂直方向的Flex布局：

.payment-type-label {
  display: flex;
  flex-direction: column;
}

这样父元素里的所有子元素都会自动垂直排列，扩展性更强。

另外提一句，你原来设置的td {padding-left: 300px}只是测试用的内边距，完全不会影响这些换行方法的效果~

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