0

I want to truncate some text and a table using CSS. For some reason the table is not truncated with the ellipsis. Only the text of the first sentence is correctly truncated.enter image description here

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="truncate">When you visit our site, pre-selected companies may access and use certain information on your device and about this site to serve relevant ads or personalized content..
<table>
    <thead>
        <tr>
            <th>Location</th>
            <th>Modified</th>
            <th>Type</th>
            <th>File Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
        <tr>
            <td>Location</td>
            <td>Modified</td>
            <td>Type</td>
            <td>File Name</td>
        </tr>
    </tbody>
</table>
</div>
user1292656
  • 2,502
  • 20
  • 48
  • 68
  • Your HTML is invalid. Spans can't contain divs – j08691 Jul 17 '19 at 16:08
  • 1
    I think you're going to have to _"truncate"_ your table differently. Your `.truncate` class is not going to be inherited by child elements. Even if it was, you're trying to truncate table rows which contain multiple table cells. Consider using an _overflow_ property to do something similar for the table. – hungerstar Jul 17 '19 at 16:16
  • 1
    As the name suggests, `text-overflow: ellipsis;` only works on text strings. Not HTML. – Turnip Jul 17 '19 at 16:17
  • A similar question has already been asked:https://stackoverflow.com/questions/10372369/why-doesnt-css-ellipsis-work-in-table-cell – Alex Leo Jul 17 '19 at 18:57

0 Answers0