Why does text-overflow not function with a div in a grid? - css

Question

I was trying to make my design responsive by making it so that when the screen gets smaller in width, the text should be 'cut off' by three dots. However, this does not seem to function in my situation, as the .container element just seems to overflow into the main element, instead of the text getting smaller. How could I fix this? Thanks in advance!
<main>
<div class="container">
<section class="account-section">
<h5 class="username">WWWWWWWWWWWWWWWWW</h5>
</section>
</div>
</main>
<style>
main {
height: 200px;
display: grid;
place-items: center;
padding: 50px;
}
.container {
position: relative;
display: grid;
grid-template: fit-content(100%) / 100%;
max-width: 1240px;
width: 100%;
position: relative;
}
.account-section {
height: fit-content;
background: var(--white);
box-shadow: 0 0 50px rgb(0, 0, 0, 0.15);
padding: 25px;
position: relative;
flex-shrink: 1;
}
.username {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>

Answer 1

overflow in this context means, that the content cannot fit in the container and so overflows. Here the container is the <h5>, while the content is the text. The <h5> will just grow according to the text content by default, because it's not constrained, neither by rules set to itself nor by rules for the parent.
If you put a width: 20% on the <h5> as demonstrated below for example, the text would overflow, and the text-overflow: ellipsis kicks in.
Another option would be to add overflow: hidden to the parent with class .account-section
Just click on the Run code snippet button, and you'll see.
main {
height: 200px;
display: grid;
place-items: center;
padding: 50px;
}
.container {
position: relative;
display: grid;
grid-template: fit-content(100%) / 100%;
max-width: 1240px;
width: 100%;
position: relative;
}
.account-section {
height: fit-content;
background: var(--white);
box-shadow: 0 0 50px rgb(0, 0, 0, 0.15);
padding: 25px;
position: relative;
flex-shrink: 1;
overflow: hidden;
}
.username {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 20%;
}
.username-fullwidth {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<main>
<div class="container">
<section class="account-section">
<h5 class="username">WWWWWWWWWWWWWWWWW</h5>
</section>
</div>
<div class="container">
<section class="account-section">
<h5 class="username-fullwidth">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw</h5>
</section>
</div>
</main>