Prevent text wrap in WordPress

Banner for article about how to prevent text wrap in WordPress

Be able to prevent text wrap in WordPress websites allows to keep one or multiple words in the same line.

In WordPress, most of the text breaks into multiple lines in small screen sizes. Unfortunately, the platform does not provide an option to prevent a specific text from splitting into separate line.

However, there is a way to prevent text wrap in WordPress.

Stop text split into separate line

It’s possible to stop text from taking up more than one line with custom styles. However, it requires several actions.

First, add a custom CSS to a website:

.prevent-text-wrapping {
  white-space: nowrap;    
}

Custom CSS allows to add own CSS code to customize the appearance of a WordPress website beyond the options provided by the core or the theme.

Second, apply a custom CSS class to a block. The example above uses prevent-text-wrapping as a custom class to prevent text wrap on WordPress pages.

Custom CSS class allows to target and style specific blocks on a WordPress website with CSS code.

Important

Be careful when setting text to stay on the same line regardless of length. It can cause overflow issues in some cases. As a result, a webpage can display unnecessary scrollbar.

Stop text from wrapping around images

In a WordPress editor, click to insert an image, or select already inserted image. When selecting alignment options for the image, choose the Align None option.

This ensures that text does not wrap around the image. The image will be aligned to the left or right, depending on the WordPress installation, and the text will start below the image.