Attempting to add ellipsis overflow but to no avail

Question

I have a table in my application that looks like this:

 var td = $('#text'); td.append("<div msg style='color:red'>" + "apply ellipsis so it doesn't stretch the td" + "</div>");

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <style> table, th, td { border: 1px solid black; } div[msg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: blue; } </style> </head> <body> <table style="width:20%"> <thead> <tr> <th style="width:10%">Month</th> <th style="width:10%">Savings</th> </tr> </thead> <tbody> <tr> <td style="width:10%" id="text"> January </td> <td style="width:10%"> Lorem ipsum dolor. </td> </tr> </table> </body> </html>

As can be seen I am appending a div in one of my td's.

I would hope to be able to add a text-overflow:ellipsis to the div, so that it doesn't stretch the td.

And would want the appended text to only be the width of the TD rather than stretching it.

I followED some documentation online and added the appropriate css settings but to no avail.

Any idea why it's not working..Thanks.

Viral Rathod · Accepted Answer · 2021-12-03 18:25:31Z

var td = $('#text'); td.append("<div style='width:100px'><div msg style='color:red'>" + "apply ellipsis so it doesn't stretch the td" + "</div></div>");

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script> <style> table, th, td { border: 1px solid black; } div[msg] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: blue; } </style> </head> <body> <table style="width:20%"> <thead> <tr> <th style="width:10%">Month</th> <th style="width:10%">Savings</th> </tr> </thead> <tbody> <tr> <td style="width:10%" id="text"> January </td> <td style="width:10%"> Lorem ipsum dolor. </td> </tr> </table> </body> </html>

Add a container to your div with specific width.

But what I do not want to hardcode the width, I'd want it to know that the width is whatever is the width of the td (in this case being 10%)

SaroGFX · Accepted Answer · 2021-12-03 18:16:36Z

You can use this CSS property (on the table element) to force the widths so they don't grow: table-layout: fixed.

Add a overflow:hidden to hide the extending content. But much better for UX would be a scroll bar or allowing the overflow on a new line.

table { table-layout:fixed; } table, th, td { border: 1px solid black; } td { white-space: nowrap; overflow:scroll; /* overflow:hidden */ }

<body> <table style="width:400px"> <thead> <tr> <th style="width:20%;">Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td id="text"> January Lorem ipsum dolor. </td> <td> Lorem ipsum dolor. </td> </tr> </table> </body> </html>

Collectives™ on Stack Overflow

Attempting to add ellipsis overflow but to no avail

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related