Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right side of the element (basket). Is there a better CSS solution for this issue?
header {
display:flex;
flex-flow: row wrap;
background:forestgreen;
justify-content: space-around;
align-items: center;
align-content: center;
height:3rem;
}
.logo {text-align:center;}
.logo span {
display:block;
}
.menu, .basket {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px;
} <header>
<div class="menu">menu</div>
<a href="/" class="logo">Company<span>subtitle</span></a>
<div class="basket">basket</div>
</header>Desired outcome:
For Mobile View
For Desktop View
Thank you in advance for any help from the stackoverflow community.