HTML display only few text in a single line-CodePudding

Hi I want to display only few text in a html column and remaining to expand only if it is expanded by the user.

All in a single line how do I do it.(as shown in below screenshot)

What to display like this

Below is my code

<table style="border-style: solid; 
              white-space: pre; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
  <tbody>
    <tr bgcolor="#18C1C1">
      <td style="text-align: center; width: 107.588px;"><strong> Tree</strong></td>
      <td style="text-align: center; width: 84.275px;"><strong> ID</strong></td>
      <td style="text-align: center; width: 81.975px;"><strong> S</strong></td>
      <td style="text-align: center; width: 3899.98px;"><strong>Text</strong></td>
      <td style="text-align: center; width: 158.688px;"><strong> Name</strong></td>
    </tr>
    <tr>
      <td style="width: 107.588px;">113</td>
      <td style="width: 84.275px;">113</td>
      <td style="width: 81.975px;">0</td>
      <td style="width: 3899.98px;">This s a test and this should not expand after a fixed length --?&gt;</td>
      <td style="width:
158.688px;">Test</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Check out text-overflow property

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}

CodePudding user response：

If you don't mind using jQuery then you can give jQuery Resizable a try. jQuery UI Resizeable will allow resizing the element by the user and the CSS will help to hide the text properties rather than moving to the next line.

I also added a unique ID property to the table, keep that in mind if you have multiple tables and act accordingly.

$("#myTable  td").resizable({
    handles: "e" //To specify where the drag handles will be placed on the resizable element.
});

table {
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;  
}
 
table th {
    white-space: nowrap;
    overflow: hidden;
}
 
table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table id="myTable" style="border-style: solid; 
              overflow: hidden; 
              word-wrap: break-word      
              text-overflow: ellipsis; 
              border-color: 000708; background-color: 000708;" border="3">
  <tbody>
    <tr bgcolor="#18C1C1">
      <td ><strong> Tree</strong></td>
      <td ><strong> ID</strong></td>
      <td ><strong> S</strong></td>
      <td ><strong>Text</strong></td>
      <td ><strong> Name</strong></td>
    </tr>
    <tr>
      <td >113</td>
      <td >113</td>
      <td >0</td>
      <td >This s a test and this should not expand after a fixed length --?&gt;</td>
      <td >Test</td>
    </tr>
  </tbody>
</table>