0

logic: If comment exists and not enough room → display comment with abbreviation "..." and a new dropdown button that extends row on click.

Not sure how this logic could be achieved, searches return js libraries instead. Complete newbie :(

Currently when there's too much text in one section the entire row becomes vertically wider. The html code is nothing fancy with no js:

'''

    <thead class="thead-dark">
        <tr>
            <th class = "time_header">Time</th>
            <th class = "date_header">Date</th>
            <th class = "type_header">Type</th>
            <th class = "value Header">Value</th>
            <th class = "comment_header">Comment</th>
        </tr>
    </thead>

    <tbody>
        {{#each userHistoryData}}
        <tr>
            <td>{{convert2Time this.date}}</td>
            <td>{{convert2Date this.date}}</td>
            <td>{{this.type}}</td>
            <td>{{this.value}}</td>
            <td>{{this.comment}}</td>
        </tr>
        {{/each}}
    </tbody>

</table>
'''
ssstev
  • 1
  • I searched for "*html css abbreviate paragraph*" and found many answers here on SO, eg: https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css, https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text, https://stackoverflow.com/questions/486563/overflowhidden-dots-at-the-end, https://stackoverflow.com/questions/44240862/how-to-truncate-a-text-in-a-html, https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css ... – Don't Panic Apr 25 '22 at 06:00
  • thx for the links I now know that abbreviation is achieved by text-overflow: ellipsis; but how to achieve "if abbreviated, expandable, expand." is a bit unclear to me. I tried the solutions in some of the answers but they end up displaying text outside of the table – ssstev Apr 25 '22 at 13:43

1 Answers1

0

Maybe you can truncate the text by doing something like this so you have an idea. then call the max-width on media screen so they fit on the size you want. Let me know if this is the one you mean. This is the example only since I dont have all your code

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

td:hover {
  white-space:break-spaces;
  overflow:visible;
}
  
@media only screen and (max-wdith:768px){
  td {max-width: 300px;}
  }
  
@media only screen and (max-wdith:680px){    
td {max-width: 100px;}
}
<table>
    <thead class="thead-dark">
        <tr>
            <th class = "time_header">Time</th>
            <th class = "date_header">Date</th>
            <th class = "type_header">Type</th>
            <th class = "value Header">Value</th>
            <th class = "comment_header">Comment</th>
        </tr>
    </thead>

    <tbody>
        {{#each userHistoryData}}
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>THIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my tableTHIS is just a sample comment and I want it to fit on my table THIS is just a sample comment and I want it to fit on my table</td>
        </tr>
        {{/each}}
    </tbody>

</table>
Crystal
  • 1,845
  • 2
  • 4
  • 16
  • thx for the answer, I think I'm stuck on the part where the logic goes: "if abbreviated, display a button where I can press that extends the row and display the rest of the text". I tried turning off ellipsis on hover but it will display text outside the table. – ssstev Apr 25 '22 at 13:41
  • @ssstev I added a code that might help you. you can force them to break the white-space so its not a very long one and not outside the table you can put your button then and put a command onclick on it instead of hover your choice. Hope I gave you more ideas. – Crystal Apr 25 '22 at 17:00