0

I'm trying to prevent line-wrapping long filenames in a load widget, and instead just have any overflow be hidden.

The filename is in a span, which is in a table td.

My instinct was to just add overflow: hidden onto the span, but that does nothing.

A bit of googling has led me to white-space: nowrap, which does constrain the long filename to a single line as desired, but as a side-effect it seems to break the display for the rest of the table.

Without white-space: nowrap:

enter image description here

The "Builder Mode auto-save" line displays perfectly, and if I scroll down the list every other entry displays properly as well. I'd like every line to have the same padding and positioning as this, regardless of filename length.

But with white-space: nowrap it changes the layout to look like this:

enter image description here

With white-space: nowrap on that one "Seventeen monkeys" span (not even on the span's class, just on the one element at an inline-CSS level) all the rows in the table end up getting displayed with more height than they should have, causing extra space above and below the text in them, and it also seems to shove the text to the left so it ends up overlapping where the thumbnail images will go.

I've made sure overflow: hidden is set on the parent td and on the table. Same results.

More googling has led me to setting the span's display as inline-block, but that doesn't seem to have any effect.

CSS for the span:

.ll_nm { display: inline-block; font-size: min(4vw, 4vh); color: #0a0; }

CSS for the parent TD:

.ll_deets { overflow: hidden; vertical-align: middle; text-align: left; }

So TL;DR: is there a way to prevent the span from line-wrapping and just have the extra text get truncated/hidden, without disrupting the layout of the rest of the table?

(Ideally also adding an ellipsis, but text-overflow: ellipsis doesn't seem to have any effect anywhere I put it.)

EDIT: As per comment request, here's the HTML:

<table id="load_list"> <tbody id="ll_tbody"></tbody> </table>

And the table gets filled with rows programmatically via JS:

 for (let l in list) { let item = list[l]; // tr let tr = document.createElement('tr'); tBody.appendChild(tr); // td - thumb let td = document.createElement('td'); tr.appendChild(td); td.className = 'll_thumb_td'; // div - thumb let div = document.createElement('div'); td.appendChild(div); div.className = 'll_thumb'; div.id = `ll_thm_${item.nameFull}`; // td - deets td = document.createElement('td'); tr.appendChild(td); td.className = 'll_deets'; // span - name let span = document.createElement('span'); td.appendChild(span); span.className = 'll_nm'; span.id = `ll_nm_${item.nameFull}`; span.innerHTML = `${gName}`; // span - timestamp span = document.createElement('span'); td.appendChild(span); span.className = 'll_ts'; span.id = `ll_ts_${item.nameFull}`; span.innerHTML = `Last saved: ${tsStr}`; } }
Improve this question
2
  • Could you please share an example of your HTML? Commented Feb 1, 2022 at 1:36
  • HTML now added, any insight appreciated! Thanks Commented Feb 1, 2022 at 1:45

1 Answer 1

Reset to default
2

Here is the code for the overflow hidden example. I have one more thing you could try involving JavaScript. Ill update my answer in a moment but for now.

for .ll_nm:

  1. display: block you could just us a paragraph instead of a span
  2. changed your font size (you can change it back)
  3. width: 275px (or any width you would like)
  4. add overflow: hidden
  5. add white-space: nowrap

EDIT: I commented out the CSS... have a look at the JavaScript. If your title is longer than 22 use substing to shorten it to 22 and add a ... at the end of it. That way you wont have a bunch of text hanging off the page. Unless you want it to be there for when they resize the screen. In that case just use the CSS provided earlier.

const title = document.querySelectorAll(".ll_nm"); title.forEach(element => { const text = element.innerText; if(text.length > 22) { const shortText = text.substring(0, 22) + "..." element.innerText = shortText; } })
.ll_deets { overflow: hidden; vertical-align: middle; text-align: left; } .ll_nm { display: block; font-size: 1.75rem; color: #0a0; /* width: 275px; overflow: hidden; white-space: nowrap; */ }
<table> <tbody> <tr> <td class="ll_thumb_td"> <div class="ll_thumb"> <img src="https://via.placeholder.com/50" alt="thumb"> </div> </td> <td class="ll_deets"> <span class="ll_nm">Lorem ipsum dolor sit.</span> <span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span> </td> </tr> <tr> <td class="ll_thumb_td"> <div class="ll_thumb"> <img src="https://via.placeholder.com/50" alt="thumb"> </div> </td> <td class="ll_deets"> <span class="ll_nm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur debitis sed harum ratione sit minima pariatur quod, obcaecati fugit adipisci.</span> <span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span> </td> </tr> <tr> <td class="ll_thumb_td"> <div class="ll_thumb"> <img src="https://via.placeholder.com/50" alt="thumb"> </div> </td> <td class="ll_deets"> <span class="ll_nm">Lorem ipsum dolor sit.</span> <span class="ll_ts">Last Saved: 0000-00-00 at 00:00:00</span> </td> </tr> </tbody> </table>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, the crux of this was the JS substring cutoff and that accomplishes what I need. I recall that solution didn't work for this issue once for me in the past so I didn't think to try it this time, but I think the reason it didn't work in the past was because the div was using a serif/non-monospace font and I couldn't predict how many chars to cut it off at. Ultimately a CSS solution would still be preferable for more universal use, but this does the trick for this particular case thanks to the monospace font. Thanks again!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.