HTML 仅在一行中显示少量文本

Question

您好，我只想在 html 列中显示少量文本，并且只有在用户展开后才能展开。

全部在一行中我该怎么做。（如下图所示）

下面是我的代码

<table style="border-style: solid; 
              white-space: pre; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
  <tbody>
    <tr bgcolor="#18C1C1">
      <td style="text-align: center; width: 107.588px;"><strong> Tree</strong></td>
      <td style="text-align: center; width: 84.275px;"><strong> ID</strong></td>
      <td style="text-align: center; width: 81.975px;"><strong> S</strong></td>
      <td style="text-align: center; width: 3899.98px;"><strong>Text</strong></td>
      <td style="text-align: center; width: 158.688px;"><strong> Name</strong></td>
    </tr>
    <tr>
      <td style="width: 107.588px;">113</td>
      <td style="width: 84.275px;">113</td>
      <td style="width: 81.975px;">0</td>
      <td style="width: 3899.98px;">This s a test and this should not expand after a fixed length --?&gt;</td>
      <td style="width:
158.688px;">Test</td>
    </tr>
  </tbody>
</table>

Answer 1

如果你不介意使用 jQuery，那么你可以试试 jQuery Resizable。 jQuery UI Resizeable 将允许用户调整元素的大小，CSS 将有助于隐藏文本属性而不是移动到下一行。

我还在表格中添加了一个唯一 ID 属性，如果您有多个表格并采取相应措施，请记住这一点。

注意：这里可以拖动表格标题。

$("#myTable thead th").resizable({
    handles: "e" //To specify where the drag handles will be placed on the resizable element.
});

table {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;  
}
 
table th {
    white-space: nowrap;
    overflow: hidden;
}
 
table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table id="myTable" style="border-style: solid; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
   <thead>
    <tr bgcolor="#18C1C1">
      <th ><strong> Tree</strong></th>
      <th ><strong> ID</strong></th>
      <th ><strong> S</strong></th>
      <th ><strong>Text</strong></th>
      <th ><strong> Name</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >113</td>
      <td >113</td>
      <td >0</td>
      <td >This s a test and this should not expand after a fixed length --?&gt;</td>
      <td >Test</td>
    </tr>
  </tbody>
</table>

Answer 2

查看text-overflow 属性

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}