如何实现th内文本span自动换行且排序箭头span固定于右上角

要实现表头文本动态换行，同时让排序箭头固定在<th>右上角，只需调整CSS即可，核心是通过定位固定箭头位置，并给文本留出足够空间：

th {
    border: 1px solid black;
    position: relative; /* 为绝对定位的箭头提供参考容器 */
    padding-right: 30px; /* 给排序箭头预留空间，避免文本被遮挡 */
    white-space: normal; /* 强制文本自动换行，覆盖表格单元格默认的nowrap行为 */
}
.sort {
    position: absolute;
    top: 5px;
    right: 5px; /* 固定在<th>右上角 */
}
.sort-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.sort-arrow.asc {
    border-bottom: 5px solid #1F2B39;
    margin-bottom: 4px;
    margin-top: 3px;
}
.sort-arrow.desc {
    border-top: 5px solid #1F2B39;
    margin-top: 4px;
    margin-bottom: 3px;
}

HTML无需修改，保持原有结构即可：

<table>
    <thead>
        <tr>
            <th>
                <span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
                <span class="sort">
                    <div class="sort-arrow asc"></div>
                    <div class="sort-arrow desc"></div>
                </span>
            </th>
            <th>
                <span>Short</span>
                <span class="sort">
                    <div class="sort-arrow asc"></div>
                    <div class="sort-arrow desc"></div>
                </span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td></tr>
    </tbody>
</table>

关键调整说明： #

• <th>添加position: relative：让内部的排序箭头能以<th>为基准进行绝对定位。
• padding-right: 30px：为右上角的箭头区域预留空间，防止长文本换行后被箭头遮挡。
• white-space: normal：解除表格单元格默认的文本不换行限制，实现动态换行效果。
• .sort改用绝对定位：彻底脱离文本流，固定在<th>右上角，不受文本长度和换行影响。

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