Wrap Long Words and Long Lines of Text in WordPress

Creating a WordPress theme from ground up is a long winding process.

There are hierarchies you have to keep in mind and the content loop needs to be perfect to display all types of posts. Else you have to keep writing code for different template files!

I have created several theme in the past. All were commercial themes and never distributed to the WordPress directory.

So this time, I wanted to experiment and submitted to the repository.

After a few days, they rejected my theme! The reason was one long word in a post title and the other was a long line of text in post comment.

Previous I never checked the themes too much with test content as they were not for distribution but only for client work.

But it appears that to submit a theme there are long procedures you have to go through and one of the most important aspect is testing your theme with test data.

In one such test data, the post title had a long long but meaningless word. And in another post, one of the comments contained really long text lines!

I had to spend some time searching for solutions.

Turns out it is quite simple to wrap long words and long lines of text. You just need a few CSS properties in an style sheet.

The first CSS property is word-wrap and its value should be break-word. This property breaks long words and wraps on to the next line.

The property word-wrap can take 4 alternate values – normal | break-word | initial | inherit. But for breaking a long long word, you should use only break-word.

.entry-title { 
    word-wrap: break-word;
}

Where .entry-title is the name of the CSS class of my post title.

The next property you will need is the white-space property.

To wrap long lines of text use this property with value pre-wrap on the element which contains the long line.

The property white-space can take the following values:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

But only pre-wrap will wrap the text where necessary and on line breaks. So the code for wrapping long line of text looks like –

pre {
    white-space: pre-wrap;
}

Where pre is the tag of the element used in the long text line. It can be different in your case and you will need to change the code accordingly.

I actually searched for a long time for the solution. Ultimately the solution was super easy with 2 lines of CSS code.

I hope you do not have to struggle like I did for the line breaks!