在移动视图的表格行中换行长文本答案

【问题标题】：Wrap long text in table row in mobile view在移动视图的表格行中换行长文本
【发布时间】：2020-10-28 07:27:36
【问题描述】：

我有一个表格，它在移动设备中采用不同的视图，每一行的 td 在移动视图中显示为列。我在一个 td 中有一个很长的文本，我想将其包装在移动设备中。（在桌面上，列的宽度会扩大，所以很好）

我尝试了所有可能的方法 - 自动换行、分词、调整宽度、空白等，但没有任何效果。

下面是代码。

.test-table .table {
  width: 50%;
}

@media all and (max-width: 500px){
        
  .test-table .table {
    width: 85%;    
  }

  .table  thead {
    display: none;
  }
    
  .test-table .table tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
  }

  .test-table table td::before {
    content: attr(col);
    font-weight: bold;
    padding-right: 20px;
    width: 40vw;
    display:inline-block;
    vertical-align: top
  }
}

<div class="test-table">
  <table class="table">
    <thead>
      <tr>
        <th >Name</th>
        <th >Designation</th>
        <th >Address</th>
        <th >Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td col="Name">Mark</td>
        <td col="Designation">ABC</td>
        <td col="Address">Markmarkmarkmarkamarkmarkmark</td>
        <td col="Email">mark@g.com</td>
      </tr>
    </tbody>
  </table>
</div>

我希望地址在不扭曲对齐的情况下换行。我该如何解决这个问题？

【问题讨论】：

你的预期输出是什么？

标签： html css

【解决方案1】：

.test-table .table {
        width: 50%

    }

@media all and (max-width: 500px){

        .test-table .table {
                width: 85%

        }

        .table  thead {
            display: none;
            }

        .test-table .table tr {
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;

            }

        .test-table table th {
            content: attr(col);
            font-weight: bold;
            padding-right: 20px;
            width: 40vw;
            display:inline-block;
            vertical-align: top

            }
        .test-table table td {
            word-break : break-all;
            width: 40vw;
            text-align: center;
            }
    }

<div class="test-table">
        <table class="table">
            <tbody>
                <tr><th >Name</th>
                <td col="Name">Mark</td></tr>
                <tr><th >Designation</th>
                <td col="Designation">ABC</td></tr>
                <tr><th >Address</th>
                <td col="Address">Markmarkmarkmarkamarkmarkmark</td></tr>
                <tr><th >Email</th>
                <td col="Email">mark@g.com</td>
              </tr>
            </tbody>
      </table>
      </div>

我改变了你的 html 表格，th 标记。

【讨论】：