CODEWITHSUNDEEP
htmlcss
ocomfd
ocomfd

Reputation: 4020

Inside td, how to apply "text-overflow: ellipsis" to SOME elements, but not all?

For example, inside a td, I have "Product name" and "Description" shows as the following:

enter image description here

Which I want the "Product" have ellipsis only, but not "Description", I tried:

    <table border="1" style="width:100%;">
      <tr>
        <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td>
      <p style="width:100%;max-width:0;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>

but it is not working. How can I do that?

Note: I found I can enclose the product with another table:

<table border="1" style="width:100%;">
  <tr>
    <td><img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
    <td>
    <table style="width:100%;"><tr><td style="max-width:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</td></tr></table>
    Description : This is a paragraph about the product detail.
    </td>
  </tr>
</table>

but I think this solution is too complex, is there any simpler solution?

Upvotes: 1

Views: 2987

Answers (2)

davecar21
davecar21

Reputation: 2674

Add table-layout:fixed; to your <table> will fix your code.This is commonly happen when you are using <table> as a container.

by adding table-layout:fixed; to your <table> so that table and column widths are set by the widths of table and col or by the width of the first row of cells. What it will do is that the <td> will detect the width of <table> and the text-overflow: ellipsis will trigger based on the width of the <table>.

Solution 1:

You can set the width of the first column <td> and <img> so that the <img> width will be responsive.

<table border="1" style="width:100%;
  table-layout:fixed;">
      <tr>
        <td style="width:20%;"><img style="width:100%;" src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td>
      <p style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very very very very very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>

Solution 2:

You can set the width of second column <td> and <img> so that the <img> width will be responsive.

<table border="1" style="width:100%;
  table-layout:fixed;">
      <tr>
        <td><img style="width:100%" src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1"/></td>
      <td style="width:80%">
      <p style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very very very very very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
      </td>
    </tr>
  </table>

Upvotes: 0

Andrzej Zi&#243;łek
Andrzej Zi&#243;łek

Reputation: 2319

For text-overflow: ellipsis to work you need to define width for element on which text-overflow: ellipsis should work. Below I placed snippet with your fixed code.

<table border="1" style="width:100%">
  <tr>
    <td>
    <img src="https://www.gravatar.com/avatar/65756ce7bab4d76ac10456972dd9f21d?s=96&d=identicon&r=PG&f=1" />
    </td>
    <td>
      <p style="width:300px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">Product name : very very very very very very very very very long product name</p>
      <p>Description : This is a paragraph about the product detail.</p>
    </td>
  </tr>
</table>

Upvotes: 3

Related Questions