Handling Long Icon Label Texts Without Affecting Layout: CSS Solutions Needed

Question

I’m facing an issue where icons move out of their intended position whenever the label text is too long, which I suspect is due to fixed spacing and layout in my CSS. How can I adjust my CSS to accommodate longer text without disrupting the layout? Are there specific properties or techniques I should consider to prevent this issue and maintain a neat and organized appearance for the icons and their labels?

Answer 1

Flexbox and Grid layouts are good to know when working with layout. Also the Text overflow property could help.

Answer 2

can you give a simplified example of your code? my blind guess is something along word-break and word-wrap..

Answer 3

the tag i makes text italic. it is a misuse of i if you want to display icons. maybe just use <span>?
From your example, the icons and lbl are being displayed in separate lines because you specified .lbl to use display:block. if you want it to be on the same line as the icon, maybe you should use display:inline-block.

Answer 4

You can see:

Please note, our class name is just an example, for shortcut purposes.

<div class="text-center">
<i class="i1 i"></i>
<span class="lbl">i1lbl</span>
</div>

<div class="text-center">
<i class="i2 i"></i>
<span class="lbl">i2lbl</span>
</div>

.i {
font-size: 28px;
color: red;
}
.lbl {
display: block;
color: black;
font-size: 12px;
margin-top: 18px;
}

Answer 5

Each individual contributes something and together we make the world better. I am happy with your response.