CSS white-space nowrap on one span breaks the entire rest of table display

Question

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:

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:

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}`;
                        
            }
        }

Answer 1

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>