文本省略号在表格内的 CSS 中不起作用

Question

td:nth-child(1) {
    max-width: 130px !important;

    div {
      a {
        max-width: 120px !important;
        outline: 1px solid red;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

文本省略号不起作用，我尝试在表中的 td 内使用省略号。当未指定宽度并且在 td（父容器）中应用省略号时，它似乎可以工作，我也使用了宽度，但它仍然不起作用

Answer 1

将其设置为“显示：内联块”

td div a {
  display: inline-block;
  width: 60px;
  outline: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div><a>Make it "display: inline-block"</a></div>
    </td>
  </tr>
</table>

Answer 2

您可以使用几种方法

• 使用

  display: block

  或

  display: inline-block

  到

  a

  标签。

• 向

  float: left

  标签提供

  float: right

  或

  a

  。

不要忘记为其父容器之一提供固定的

width

或

max-width

。

/* using display: inline-block or dislay: block */

td:nth-child(2)>div {
  max-width: 300px;
}

td:nth-child(2)>div>a {
  width: 100%;
  display: inline-block; // or block;
  outline: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>
        <div><a href="#">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content dfidjfdfd</a></div>
      </td>
    </tr>
  </tbody>
</table>

/* using float: left and float: right */

td:nth-child(2)>div {
  max-width: 300px;
}

td:nth-child(2)>div>a {
  width: 100%;
  float: left; // or right
  outline: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>
        <div><a href="#">Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content dfidjfdfd</a></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 3

为父级提供宽度，这样可以防止文本超出框外，您正在尝试设置文本宽度，这样它就不会溢出。

td:nth-child(1) {

    div {
        width:125px;
        a {
            outline: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}