Different text overflow properties for display: block vs display: inline [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 13 days ago.
Improve this question
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. :)

Answer 1

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