如何在移动视图的表格数据列中包装长文本？答案

【问题标题】：How to wrap Long Text in data-column of table in mobile view?如何在移动视图的表格数据列中包装长文本？
【发布时间】：2019-12-02 09:41:19
【问题描述】：

当我使用属性时，我有一个通过自定义 CSS 响应的表格

<td data-column="Column Name or Long Text"></td>

数据列中的大文本未包含在表格中。它在桌子外面。

        .table_card_view { border-collapse: collapse; }

        @media only screen and (max-width:768px) and (min-width:200px)  {
          .table_card_view, .table_card_view thead, .table_card_view tbody, .table_card_view th, .table_card_view td, .table_card_view tr 
          { display: block; }  
          
          .table_card_view thead tr { position: absolute; top: -9999px; left: -9999px; }
          
         .table_card_view tr 
          { border: 1px solid #ccc; margin-top: 4%; border-radius:7px; }
          
        .table_card_view td {
          border: none; border-bottom: 0px solid #eee;position: relative; padding-left: 50%; 
         }

        .table_card_view td:before { 
            top: 6px; left: 6px; width: 45%;padding-right: 10px;  white-space: nowrap; content: attr(data-column); color: #000; font-weight: bold;
         }
      }
    
     <body>     
        <table class="table table-striped table_card_view">    
            <thead><tr>
                  <th> Date and Time </th>
                  <th> 
                     No. of Company 1 Users Processed in Company 2 
                  </th>
                  <th> 
                     No. of Company 2 Tickets Processed in Company 2 
                  </th>     
                  <th> Any Error ? </th>
               </tr> </thead>
                          
            <tbody>
               <tr>
                  <td data-column="Date and Time"> 23 July 2019 </td>
                  <td data-column="No. of Company 1 Users Processed in Company 2">
                  1 </td>
                  <td data-column="No. of Company 1 Tickets Processed in Company 2">  
                  2 </td>
                  <td data-column="Any Sync Error ?"> 0 </td>
               </tr></tbody>

         </table>
       </body>

我希望在 data-column="" 中使用大文本，而不是超出表格。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

试试word-breakcss 属性

   th, td {
        word-break: break-word;
    }

【讨论】：

嗨@Vikas，感谢您的帮助，但我已经尝试过了，但是这个 CSS 属性不适用于数据列的文本属性。

【解决方案2】：

td {

换行符：任何地方；空白：前行；

}

使用此属性。我希望这会奏效

【讨论】：

嗨 @Raja Usman，感谢您的帮助，但此 CSS 属性不适用于数据列的文本属性。
为什么不能在 td 中使用 data-label 。盒子大小在数据标签上工作
我现在使用数据标签，但是当我查看 360 x 640 视图时，它超出了。
给 td (width:100%; display:block; padding:10px) 试试这个
嗨，我附上了截图，这是设计在移动视图中的显示方式。上述回答的属性仅适用于表数据意味着Data。不在数据列上。