Hi,
No matter what I try
<style>
.FlexColumn {display: flex;flex-flow: column nowrap }
</style>
<div class="FlexColumn">
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
</div>
<!-- I tried many CSS trick here... -->
<div>
<span>X</span><br><span>X</span><br><span>X</span><br><span>X</span>
</div>
I always get a vertical gap between the characters !
Any ideas ?
Thanks.
line-height is the property you are looking for. Beware fucking with line-height is usually a bad idea, as characters can extend below or above the “line” and will collide.
Also maybe look at divitis, you might be suffering from it.
Your issue is not with css, it’s with typographical https://en.wikipedia.org/wiki/Leading. You can get rid of that gap with negative margin or with line-height and but it would reduce readability.
It might look okayish with your example with just letters ‘X’, but if you try it with any diacritic letters (like https://en.wikipedia.org/wiki/%C3%84) , the lines would overlap and the text would be unreadable.
maybe the line-height property is the thing you are looking for.
.FlexColumn {display: flex;flex-flow: column nowrap; line-height: 0.7 }
ok I’ve found a work around
<style>
.FlexColumn {display: flex;flex-flow: column nowrap }
.FlexColumn > div {display: inline-block; margin: -4px 0}
</style>
<div class="FlexColumn">
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
</div>
But if someone have something more proper, I’m all ears.
My two cents: if you have to resort to negative numbers, it’s time to rethink things. It may work, but it’s kludgy and most likely not easily scalable. Take the extra effort and find the better (more correct) way to manage this issue. Not only will it be correct, and scalable, but I’m sure you’ll learn a lot along the way. It really is a win-win when you take your time. 😊
