Quick Fix for WordPress Table Text Wrapping

wordpress-icon-smWordPress 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:

before-no-horiz-span

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

theme-editor-view-1

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 {

theme-editor-view-2

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.

after-horiz-span

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.

About Will Foster

hobo devop/sysadmin, all-around nice guy.
This entry was posted in open source and tagged , , , , , . Bookmark the permalink.

Have a Squat, Leave a Reply ..

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s