WordPress enforces sensible defaults for views and text wrapping that addresses most blogging purposes. Sometimes you want to work around these defaults. Recently I needed to expand text-wrapping behavior for tables to not break apart words to fit the default theme formatting. Here’s how this is accomplished, hoping it saves other people time.
My Usage
I am using an internal Ansible-driven deployment of WordPress to capture automated wiki page updates for some R&D systems pulled out of Foreman, using the wordpress-python-xmlrpc library. To simplify things I’m basically using WordPress as an infrastructure wiki. I accomplish this using generated markdown and feeding that into an existing WordPress page anytime system data, changes or other aspects occur.
The Problem
The issue I’m hitting is long words (like server names) are broken/wrapped by the settings in styles.css within WordPress, so it looks like this:
The Solution
To force WordPress to not break/wrap longer strings and words you’ll need to modify two variables in styles.css. These variables are word-wrap and word-break in CSS. You can do this on the actual CSS file itself or via the WordPress administrative dashboard.
The file in question for me was:
/srv/wordpress/wp-content/themes/twentysixteen/style.css
Edit in Dashboard
Go to Appearance -> Editor to access your theme’s style.css
Find the section in styles.css called * 11 .0 – Content (if you are using a different theme it might be elsewhere). You’re looking for an area called .site-content {
Change this to the following:
Before
.site-content article {
word-wrap: break-word;
}
After
.site-content {
word-wrap: normal;
word-break: keep-all;
}
Now save the file and refresh the page, you should see the difference. No more wrapping of longer words and fields in my auto-generated markdown table.
CSS Standards and Browsers
Not all browsers will honor the word-break: keep all; directive, Google Chrome may still wrap text that contains the – character as well as ignore it. To work around this we’ve just increased the column title of any wrapped text to at least 14 characters.
hobo.house 