[英]Attempting to add ellipsis overflow but to no avail
我的应用程序中有一个如下所示的表：
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>
可以看出，我在我的一个 td 中附加了一个 div。
我希望能够在 div 中添加一个 text-overflow:ellipsis，这样它就不会拉伸 td。
并且希望附加的文本只是 TD 的宽度而不是拉伸它。
我在线阅读了一些文档并添加了适当的 css 设置，但无济于事。
知道为什么它不起作用..谢谢。
您可以使用此 CSS 属性（在 table 元素上）强制宽度使其不会增长： table-layout: fixed 。
添加一个溢出：隐藏以隐藏扩展内容。 但对于 UX 来说更好的是滚动条或允许在新行上溢出。
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>
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>
将容器添加到具有特定宽度的 div。
在不使用jquery的情况下在div / span元素溢出上添加点/省略号
[英]Add dots/ellipsis on div/span element overflow without using jquery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.