在td内的跨度不能正确生成

Question

<tr>
                    <td>abc <span>123</span></td>
                    <td>another td</td>
                    <td>another td</td>
                    </tr>

为什么我的上面的代码第一个td的跨度不能正确生成？

我希望得到像这样的结果

=============================================
abc       =   another td   =   another td   =
123       
=============================================

Answer 1

使用css display 属性对此进行归档， 查看此 jsFiddle

CSS

td{
    vertical-align: top;
}
td span {
    display:block;
}

HTML

<table>
    <tr>
        <td>abc <span>123</span></td>
        <td>another td</td>
        <td>another td</td>
    </tr>
</table>

Answer 2

使用span标记不会提供您想要的结果。你需要有CSS规则。

将以下CSS添加到您的网页

td {
    width: 100px;
}

td span {
    word-wrap: break-word;
    display: block;
}

这为元素设置宽度，跨度用于打破文本行并将其移动到下一行。