CSS 控制TD元素的溢出

在本文中，我们将介绍如何使用CSS来控制HTML表格中TD元素的溢出情况。溢出指的是当内容超出了元素的大小时，如何处理超出部分的显示。

阅读更多：CSS 教程

1. CSS属性overflow

CSS属性overflow用于控制元素内容的溢出情况。它有以下几个属性值可选：

visible：默认值，内容会溢出元素框，不会被裁剪，显示在元素外部；
hidden：溢出的内容会被裁剪，不会显示；
scroll：溢出的内容会显示滚动条，允许用户滚动内容来查看超出部分；
auto：根据需要显示滚动条，如果内容没有超出元素大小，则不显示滚动条。

下面是一个示例：

<style>
  .td-container {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
  }
</style>

<div class="td-container">
  <table>
    <tr>
      <td>This is a long text</td>
    </tr>
  </table>
</div>

在上面的示例中，我们创建了一个高度为100像素、宽度为200像素的容器，并将其中的文本内容设置为超长文本。由于容器的overflow属性被设置为hidden，超出容器大小的内容会被裁剪隐藏，不会显示在页面上。

2. CSS属性text-overflow

对于单元格元素TD，还可以使用CSS属性text-overflow来控制文字的溢出情况。它有以下几个属性值可选：

clip：默认值，将超出的部分裁剪隐藏；
ellipsis：在超出部分的末尾显示省略号；
initial：使用默认值；
inherit：继承父级元素的属性值。

下面是一个示例：

<style>
  td {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<table>
  <tr>
    <td>This is a long text that will be truncated with ellipsis.</td>
  </tr>
</table>

在上面的示例中，我们设置了TD元素的宽度为100像素，并使用white-space: nowrap来禁止文字换行。当文字内容超出TD元素的宽度时，超出部分会被裁剪隐藏，并在末尾显示省略号。

3. CSS属性max-height和max-width

除了使用overflow和text-overflow属性控制溢出行为外，还可以使用CSS属性max-height和max-width来限制元素的最大高度和最大宽度。这样即使内容超出限制，元素也会按照限制的尺寸正常显示，而不会出现溢出或显示滚动条。

下面是一个示例：

<style>
  .td-container {
    max-width: 200px;
    max-height: 100px;
    overflow: hidden;
  }
</style>

<div class="td-container">
  <table>
    <tr>
      <td>This is a long text that will be truncated with ellipsis.</td>
    </tr>
  </table>
</div>

在上面的示例中，我们设置了容器的最大宽度为200像素，最大高度为100像素。当内容超出限制时，超出部分会被裁剪隐藏，而不会显示滚动条。