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 display (from flex to 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

See the Pen Wrapping Text in Buttons by Nate Northway (@the_Northway) on CodePen.

No Comments...yet