I have a problem with the automatic mobile responsiveness of this section on my site.
In example number 1, if you reduce the size of the window, the username will truncate as desired.
In example number 2, there is a flexbox that contains a profile picture, example 1 section and a subscribe button. And now if you reduce the window, the text is no longer truncated...
Does anyone have a CSS solution to this problem? Here I want it to be automatic for any screen width, so putting a max-width on the username is not desirable.
.list { margin: 0; padding: 0;}.item { display: flex; align-items: center;}.profile-picture { overflow: hidden; display: inline-flex; flex-shrink: 0; width: 100px; height: 100px; border-radius: 100%;}.info-bloc { padding-left: 20px;}.info-bloc2 { display: flex; justify-content: space-between; align-items: center;}.username-bloc { display: flex; align-items: center; min-width: 0px; margin-bottom: 5px;}.username { font-size: 20px; color: #000000; font-weight: 700; /* truncate */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.verified-icon { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; margin-left: 5px;}.subscribers-count { font-size: 12px;}.subscribe-btn { font-size: 14px; border-radius: 20px; height: 40px; padding: 0px 24px; border: none;}.description { font-size: 14px; text-wrap: wrap; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 15px;}<div><div><div class="username-bloc"><a href="#" title="This is a long username" class="username">This is a very very very very very very very very very very very very very very very very very very very long username</a><svg class="verified-icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M9.38,16.01L7,13.61c-0.39-0.39-0.39-1.02,0-1.41 l0.07-0.07c0.39-0.39,1.03-0.39,1.42,0l1.61,1.62l5.15-5.16c0.39-0.39,1.03-0.39,1.42,0l0.07,0.07c0.39,0.39,0.39,1.02,0,1.41 l-5.92,5.94C10.41,16.4,9.78,16.4,9.38,16.01z" /></g></svg></div><div class="subscribers-count">0 subscribers</div></div></div><div>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div><!-- EXAMPLE 2 --><ul class="list"><li class="item"><a href="#" title="This is a long username" class="profile-picture"><img src="#" alt="This is a long username" /></a><div class="info-bloc"><div class="info-bloc2"><div><div class="username-bloc"><a href="#" title="This is a long username" class="username">This is a long username</a><svg class="verified-icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="#000000"><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M9.38,16.01L7,13.61c-0.39-0.39-0.39-1.02,0-1.41 l0.07-0.07c0.39-0.39,1.03-0.39,1.42,0l1.61,1.62l5.15-5.16c0.39-0.39,1.03-0.39,1.42,0l0.07,0.07c0.39,0.39,0.39,1.02,0,1.41 l-5.92,5.94C10.41,16.4,9.78,16.4,9.38,16.01z" /></g></svg></div><div class="subscribers-count">0 subscribers</div></div><button type="button" class="subscribe-btn">Subscribe</button></div><div class="description">Lorem ipsum odor amet, consectetuer adipiscing elit. Mollis commodo ultrices, eu vulputate cras ornare.</div></div></li></ul>