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

Question

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

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

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

运行结果及报错内容

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

我的解答思路和尝试过的方法

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内容过长，想要内容折行显示。

Answer 1

测试题主代码没问题啊，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>