Preformatted Text Wrapping In Wordpress

For most of my codes in post posts I use the “Preformatted” style from the drop down menu in the Visual editor of WordPress. It works quite well for demonstrating sections of code or screen output. However, there is a problem with using Preformatted and that is the issue with word wrapping.

Preformatted style in WordPress uses the <pre> HTML tag. The <pre> tag does not word wrap any of the sentences contained within, and if you are using a defined space for displaying the text, as with the theme on my WordPress, you may find that your examples are shortened and the text appears over the sidebar or scroll bar appears. There is a fix to this problem that requires some minor style tag modifications for the <pre> tags that seem to run off into the distance.

So go to HTML editor and write the preformatted text within this tag:

See The Difference:

The original preformatted text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non sapien nec ligula rhoncus congue. Fusce vel nisi est, ut pellentesque nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut neque enim, et mattis velit. Maecenas sed lobortis mi. Ut vel lacus ligula. Donec vitae leo elit, nec imperdiet sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec faucibus accumsan velit quis ultrices. Nunc quis odio eu eros feugiat eleifend consectetur eget dui. Etiam nec lacus sit amet magna venenatis malesuada. Etiam eu commodo nunc. Quisque ipsum turpis, convallis sit amet pulvinar quis, pharetra vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

After adding custom style:

SAHIL