Fixing Button Text Overflow

I’m working on a redesign using the Bulma CSS framework to overhaul my site. Bulma has a few quirks though, like this overflowing button text


From One To The Other with CSS

Posted October 31, 2018
Filed Under: blog, featured


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.

The result of changing the white-space property: a button with no padding
The result of changing the white-space property: a button with no 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.

0 Comments


Leave a Reply

Your email address will not be published. Required fields are marked *