table表格中td内容过长,想要内容折行显示。

问题遇到的现象和发生背景

table表格中td内容过长,想要内容折行显示。

问题相关代码,请勿粘贴截图

img

运行结果及报错内容

即使添加了相关折行显示代码,但是仍然不能折行

我的解答思路和尝试过的方法
table {
 
    table-layout: fixed;
    border-collapse:collapse;
    width: 100%;
}
  th,
  td {
    min-width: 60px;
    max-width: 400px;
    padding: 7px 10px;
    line-height: 24px;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    white-space: nowrap;/*控制单行显示*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
  }

我想要达到的结果

table表格中td内容过长,想要内容折行显示。

测试题主代码没问题啊,td内容结构是什么样的。如果内容放div或者其他容器下确实无法显示省略号,需要给td下的容器加样式,比如内容放div,p下还需要单独设置过div,p的样式

<style>
    table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        min-width: 60px;
        max-width: 400px;
        padding: 7px 10px;
        line-height: 24px;
        border-bottom: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        white-space: nowrap; /*控制单行显示*/
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*隐藏的字符用省略号表示*/
    }
        td > div, td > p {
            width: 100%;
            height: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
</style>
<table>
    <tr>
        <td><div>是的,您始终可以用其他人的信用卡买票,只要您在参观当天在公园的售票处出示信用卡主人的正式身份证明和用于支付的信用卡或借记卡的复印件,在这两种情况下,双方都要复印并由其主人签字。</div></td>
        <td><p>是的,您始终可以用其他人的信用卡买票,只要您在参观当天在公园的售票处出示信用卡主人的正式身份证明和用于支付的信用卡或借记卡的复印件,在这两种情况下,双方都要复印并由其主人签字。</p></td>
        <td>是的,您始终可以用其他人的信用卡买票,只要您在参观当天在公园的售票处出示信用卡主人的正式身份证明和用于支付的信用卡或借记卡的复印件,在这两种情况下,双方都要复印并由其主人签字。</td>

    </tr>
</table>

设置单元格自动换行,在td中添加如下:

word-wrap: break-word;

要内容折行显示去掉 white-space: nowrap;和overflow: hidden; 即可
但是这样text-overflow: ellipsis;加省略号就无效了, 不知道你需要什么效果?

word-wrap:break-word;
word-break:break-all;