Attempting to add ellipsis overflow but to no avail-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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.