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;
      }
    }
  }

text ellipsis is not working , i tried using ellipsis inside td in table. it seems to work when width is not specified and ellipsis is applied in td(parent contaienr) i used width too still it dosent work

CodePudding user response：

Make it "display: inline-block"

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>

CodePudding user response：

You can use a couple of methods

• Use display: block or display: inline-block to the a tag.

• Provide float: left or float: right to the a tag.

Don't forgot to provide a fixed width or max-width to one of it's parent container.

/* 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>

CodePudding user response：

give width to perent so it will prevent the text to go out of the box, you are trying to set width to text so it can't be overflowed.

td:nth-child(1) {

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

}