Tengo una tabla en mi aplicación que se ve así:
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>Como se puede ver, estoy agregando un div en uno de mis td.
Espero poder agregar un desbordamiento de texto: puntos suspensivos al div, para que no estire el td.
Y querría que el texto adjunto solo tuviera el ancho del TD en lugar de estirarlo.
Seguí algunos documentos en línea y agregué la configuración CSS adecuada, pero fue en vano.
Alguna idea de por qué no funciona... Gracias.
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>Agregue un contenedor a su div con un ancho específico.
Puede usar esta propiedad CSS (en el elemento de la tabla) para forzar los anchos para que no crezcan: table-layout: fixed .
Agregue un overflow:hidden para ocultar el contenido extendido. Pero mucho mejor para UX sería una barra de desplazamiento o permitir el desbordamiento en una nueva línea.
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>