如何在跨度元素之间设置换行符
我有一个 HTML 表，其中一列将包含一长行文本。但是这个文本的某些部分需要有不同的字体颜色，所以我将这个文本分成一系列跨度元素，这样我就可以相应地格式化每个元素。问题是我可以让文本在这个单元格内换行，它扩展 TD 大小以适应元素。
我不需要每个跨度内的文本中断，但是当元素到达 TD 元素的末尾时，我希望下一个跨度排列在下一行。
有谁知道我该怎么做？
举例说明：
来源：
<table>
<tr>
<td>
<span>Sample Text A</span>
<span>Sample Text B</span>
<span>Sample Text C</span>
<span>Sample Text D</span>
<span>Sample Text E</span>
<span>Sample Text F</span>
</td>
</tr>
</table>
这是所需的输出：
This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C
Sample Text D Sample Text E Sample Text F
这是我得到的结果：
This is the limit of the TD element =============>|
Sample Text A Sample Text B Sample Text C Sample Text D Sample Text E Sample Text F
如果你做spananinline-block你会得到你想要的行为；
span
{display:inline-block}
然后将表格单元格的宽度设置成20em这样；
td
{width:20em; border:1px solid red}
（红色边框只是为了让您可以看到发生了什么。）
屏幕看起来像这样；
如果您要将宽度更改为15em这样；
td
{width:15em; border:1px solid red}
然后屏幕会显示这个；
仅供参考，这是我用于屏幕截图的 HTML；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
<tr>
<td>
<span>Sample Text A</span>
<span>Sample Text B</span>
<span>Sample Text C</span>
<span>Sample Text D</span>
<span>Sample Text E</span>
<span>Sample Text F</span>
</td>
</tr>
</table>
</body>
<html>