My HTML template includes text imported from a database field into a <td> tag. The length of the text can range from 3 to 200 characters, and the <td> spans 100% of the screen width. If the text surpasses the width of the screen, I want it to be truncated and end with "..."
I considered limiting the number of characters imported, but the varying screen widths of devices (ranging from 750 to 1920 pixels) make this impractical. It should display as much text as possible for each specific screen size without wrapping because the table row heights must remain fixed.
Instead of:
|Text within this cell is too long to fit in this|table cell
It would become:
|Text within this cell is too long to fit in t...|
Preferably, the "..." would link to another page where the full text is displayed. A JavaScript solution is acceptable, but CSS/HTML5 is preferred if feasible.