Text align but not quite text-align
Hello, so I'm trying to align my text in different ways.
First, I'm trying to do the right-alignment figma offers (short-to-longest lines), but in css the text-align cascades in the opposite way (From longest-to-short lines). Photo 2 is figma & 1 is css
For another section, I'm trying to get a longest-to-short alignment, but this time as a centered text. (Photo 3).
I managed to get it with <br> tags, however, this is not responsive and breaks in smaller screens.
Is there a way i could accomplish these while being responsive? Thank you for your time
2 Replies
I'm not sure that you can do this with CSS, at least not with a pre-defined property.
You could achieve it by adding an element (or possibly better, a pseudo element) with a
shape-outside polygon but this might not be a scalable (both in terms of responsive and number of lines) solution.
This is what I came up with using the method I mentioned.
https://codepen.io/cbolson/pen/yLQzrQK
Not convinced by it as it requires some magic numbers which in turn depend on the length of the text and the width of the container (possibly JavaScript could help here)Thank you! I'll try it out and see if i can make it work ^