Different text overflow properties for display: block vs display: inline

This question is too nuanced for me to find an answer on Google and I've been struggling with it for so long trying to find a good answer.

I want span elements to cut off with an ellipsis when they overflow a div. The problem is that this behavior only works when I set the span's display to block, but this causes the other spans who aren't long enough to overflow the div have their widths expanded, when I want them to stay only the size of their inner content.

Here's a demonstration in an online editor - try changing display from "block" to "inline" to see what I mean.
http://tpcg.io/_0UNNZM

Any help would be appreciated, I am new at css and it has been treacherous to learn so far.

My solution is a bit hacky. I gave the second span a classname.

	<span class="secondElement">000</span>

I then set the second element to display: inline:

.secondElement {
	    display: inline;
	}

It solved the issue. Here is the working solution: http://tpcg.io/_PJLSI5 .

Edit:
Since the elements are dynamic. I implemented the change the functionality with the help of JavaScript.

First, I add a class name spansContainer so that I can reference it with JavaScript. And I also removed the class on the second span element:

 <div class="spansContainer">
      <span>0000000000000000000000</span>
      <br />
      <span>000</span>
    </div>

In the CSS, I set display to inline and added a new class block, that sets display to block:

  span {
        background-color: #0000ff80;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline;  /* set it to inline*/
      }
    /* this class is added to the span element using JavaScript */
      .block {
        display: block;
      }

From there, I wrote the JavaScript solution:

const spansContainer = document.querySelector(".spansContainer");
      const spanElements = document.querySelectorAll("span");
     // add the class `block` to all span elements
     // that have a width greater than the parent 
     // on page load.
      spanElements.forEach((spanEl) => {
        if (spanEl.offsetWidth > spansContainer.offsetWidth) {
          spanEl.classList.add("block");
        }
      });

      // configuration of the observer:
      config = {
        attributes: true,
        childList: true,
        characterData: true,
        subtree: true,
      };
      // create an observer instance
      var observer = new MutationObserver(function (mutations) {
        // loop through the mutated span elements
        mutations.forEach(function (mutation) {
          const spanEl = mutation.target.parentElement;
          if (spanEl.offsetWidth > spansContainer.offsetWidth) {
            spanEl.classList.add("block");
          } else {
            // remove class 'block' if span's width is 
            // smaller than the div
            spanEl.classList.remove("block");
          }
        });
      });

      // pass in the target node, as well as the observer options
      observer.observe(spansContainer, config)

I created the codepen for the solution here: https://codepen.io/Stanleyu/pen/bGjJwxO