Fixing Button Text Overflow

October 21, 2018
CSS and SASS Frontend Web Development

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

Leave a Reply

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

Previous Post

The Functionality that htaccess Provides

From September 27, 2018

Modifying the htaccess file can improve your SEO, can improve usability of your site, improve server response time, help save you headaches, and more.

Read This Article
Next Post

What’s the deal with WWW?

From October 25, 2018

I recently had a client ask me ‘is there a difference between ‘’ and ‘’?’ In short: no. But of course, it’s more complicated.

Read This Article