CSS 如何使用CSS在表格中截断长文本

在本文中，我们将介绍如何使用CSS在表格中截断长文本。在处理大量文本信息的网页或应用程序中，表格是一个常见的显示和组织数据的方式。然而，如果表格中的文本过长，可能会导致布局混乱和不可读的问题。解决这个问题的一种方法是使用CSS来截断长文本，并显示省略号来表示截断的部分。

阅读更多：CSS 教程

方法1：使用CSS的text-overflow属性

CSS的text-overflow属性可以用于在元素的一行内控制文本的溢出情况。通过将text-overflow属性设置为”ellipsis”，可以显示省略号来表示被截断的文本。

以下是一个示例，演示如何使用text-overflow属性截断表格中的长文本：

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

  .table td {
    border: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<table class="table">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
</table>

在上面的示例中，我们给表格的单元格添加了以下样式：

white-space: nowrap;：此属性将文本强制在一行内显示，防止换行。
overflow: hidden;：此属性将超出单元格大小的文本隐藏起来，而不是换行显示。
text-overflow: ellipsis;：此属性显示省略号表示被截断的文本。

通过运行上面的示例代码，我们可以看到表格中的长文本被截断，并用省略号代替。

这种方法适用于所有类型的表格，但是如果表格的宽度不够，可能会导致截断的文本部分无法完全显示。

方法2：使用CSS的max-width和overflow-wrap属性

另一个截断表格中长文本的方法是使用CSS的max-width和overflow-wrap属性。max-width属性可以设置元素的最大宽度，而overflow-wrap属性可以控制文本如何换行。

以下是一个示例，演示如何使用max-width和overflow-wrap属性截断表格中的长文本：

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

  .table td {
    border: 1px solid #ddd;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
  }
</style>

<table class="table">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
</table>

在上面的示例中，我们给表格的单元格添加了以下样式：

max-width: 200px;：此属性将单元格的最大宽度设置为200像素。
overflow-wrap: break-word;：此属性将超出单元格宽度的单词换行，以防止文本溢出到其他单元格。

通过运行上面的示例代码，我们可以看到表格中的长文本在达到最大宽度时被截断，并使用省略号代替。

这种方法可以处理较窄的表格，但如果表格的宽度很大，可能会导致表格变形或者截断的文本过长。

方法3：使用CSS的table-layout属性

CSS的table-layout属性可以控制表格的布局方式。在截断表格中的长文本时，将table-layout属性设置为fixed可以确保每个单元格的宽度相等，并且文本被截断。

以下是一个示例，演示如何使用table-layout属性截断表格中的长文本：

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

  .table td {
    border: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<table class="table">
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
  </tr>
</table>

在上面的示例中，我们给表格添加了以下样式：