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.