I’m having an issue with a bit of text overflowing on a CSS grid. If the text overflows, I want it to overflow into ellipsis. However it’s not working and I’m not sure what I am doing wrong.
As you can see here on dev tools it goes past its assigned grid.
.grid {
display: grid;
height: 100vh;
width: 100vw;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.2fr 1fr 1fr 1fr;
grid-template-areas: "nav nav nav nav" "tallarticle largecomic largecomic smallarticle1" "tallarticle largecomic largecomic smallarticle2" "article1 article2 article3 article4";
grid-gap: 0.2rem;
font-size: 20px;
color: aliceblue;
}
.articletext {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}<div class="grid">
<nav>
Comment
</nav>
<div id="tallarticle">
<h2> Matthew Parris </h2>
<h1> Our shortage of social housing is a disgrace</h1>
<div class="articletext">
(INSERT BIG ARTICLE HERE FOR OVERFLOW)
</div>
</div>
<div id="largecomic">
<img id="comicimg" src="https://stackoverflow.com/questions/77073831/comic.jpg">
</div>
<div id="smallarticle1">smallArticle1</div>
<div id="smallarticle2">smallArticle2</div>
<div id="article1">Article1</div>
<div id="article2">Article2</div>
<div id="article3">Article3</div>
<div id="article4">Article4</div>
</div>I tried some of the solutions from previous threads like minmax and min width. But it didn’t seem to work.
You’re missing
white-space: nowrap;.Ellipsis will only work if the container has a fixed size. Currently, the container is allowed to grow as much as needed, so the ellipsis rule will never kick in.