I’m working on a redesign! Woo! I’m using the Bulma CSS framework to overhaul my site. I really like how good it’s looking and how easy it’s been to develop for WordPress. Bulma has a few quirks though, like this button text overflow
The Problem: Long strings of text overflow post pagination buttons. I don’t want to truncate text.
What I Want: I want the text to wrap inside the button.
How to get there: Well, I started by trying to play with the
word-break property, but that didn’t give me the right result. I then started trying to play with
inline-flex), and that didn’t give me the result I wanted, either. Looking through the element with Chrome’s inspector, I found that
white-space was set to
no-wrap. Huh. So I changed that, and got the text to wrap, but without the expected padding.
I knew padding was set already, so I didn’t want to further mess with that. But I also knew that height was explicitly set, so I changed the height to
auto to allow for the new line wraps. Viola! It worked! See my CodePen below to see this in action