How can I truncate text as the page gets smaller with css? - html

Question

How can I truncate text as the page gets smaller with CSS?
Currently, as the page gets smaller, the text goes under the elements and isn't truncated.
<div class="flex-parent has-child">
<div class="flex-child long-and-truncated-with-child-corrected">
<div class="logo">logo </div>
<div>
<h2> This is a long string that is OK to truncate please and thank you</h2>
</div>
</div>
<div class="flex-child short-and-fixed">
<div></div>
<div></div>
<div></div>
</div>
</div>
.flex-parent {
display: flex;
align-items: center;
padding: 10px;
margin: 30px 0;
}
h2 {
font-size: 1rem;
font-weight: normal;
}
.short-and-fixed {
white-space: nowrap;
> div {
width: 30px;
height: 30px;
border-radius: 10px;
background: lightgreen;
display: inline-block;
}
}
.long-and-truncated-with-child-corrected {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
min-width: 0; /* or some value */
h2 {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
body {
padding: 40px;
}
or try codepen
If users access this on their laptops or tablets, they will be able to see the whole text(This is a long string that is OK to truncate please and thank you).
However, they shouldn't see the text when they use their phones since there is not enough space for it.
Also, the text(This is a long string that is OK to truncate please and thank you) is dynamic so there will be the time when text is shorter or longer so I don't want to set max-width or width.
Attempts
I found multiple links doing similar things but didn't apply to my case.
Truncate text with css
How can I truncate centered text by letter with CSS?
How can I truncate the multiline text from the database? (html/css/php)