Is it possible to avoid widows in CSS without the need for extra HTML elements?

Question

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as   or <span>.

Despite my attempts to adjust margins and padding, I cannot achieve the desired outcome.

Here is how the text appears on the screen:

<h1>This serves as an example of the headline.</h1>

I wish to avoid having a widow (a single word at the end of a chunk of text) so that when the line breaks, it considers the final 2 words as one unit.

For instance, "an example" should move to the next line instead of just “example” by itself.

Is there a method to accomplish this using only CSS?

I would be thrilled to see "white-space: no-widow" supported in CSS, even though it doesn't currently exist.

html css content-management-system whitespace word-wrap

Answer 1

Answer №1

Simply put: no, I am not aware of any method to achieve this.

If it was possible to enclose the last two words within a span element with a no-wrap style applied, that might be a solution. However, it appears that adding a span in your CMS is not an option.

One alternative approach: adjust the width of the h1 using em units so that its width corresponds proportionally to the text size. By doing this, you can specify a width that enforces where the title breaks, and this width will adjust accordingly as the text size changes.

Answer 2

Simply put: no, I am not aware of any method to achieve this.

If it was possible to enclose the last two words within a span element with a no-wrap style applied, that might be a solution. However, it appears that adding a span in your CMS is not an option.

One alternative approach: adjust the width of the h1 using em units so that its width corresponds proportionally to the text size. By doing this, you can specify a width that enforces where the title breaks, and this width will adjust accordingly as the text size changes.

Answer 3

Answer №2

A bit late to the party, but if you're still seeking a solution, here's something that might assist you. There is a new CSS property called "text-wrap" (unfortunately, not currently supported by Firefox and Safari) that you can use (source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap).

You can experiment with the following:

h1 { text-wrap: balance; }

I hope this information proves helpful!

Answer 4

A bit late to the party, but if you're still seeking a solution, here's something that might assist you. There is a new CSS property called "text-wrap" (unfortunately, not currently supported by Firefox and Safari) that you can use (source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap).

You can experiment with the following:

h1 { text-wrap: balance; }

I hope this information proves helpful!

Is it possible to avoid widows in CSS without the need for extra HTML elements?

Answer №1

Answer №2

Similar questions

Encountering problems when attempting to effectively filter a list of products using data

Is there a way to turn off Emmet's CSS Abbreviations feature in Sublime Text 2?

Stop users from refreshing or closing the window while an axios request is being processed

The div element with the id "wrapper" is not functioning properly within the box model

The dropdown feature in Bootstrap 5 seems to be malfunctioning in Angular 12

Is it possible to establish a CSS minimum width that is relative to a different element?

Bootstrap causing malfunction of JQuery bounce animation

Hover over to disable inline styling and restore default appearance

Issue with the table background in Internet Explorer

What steps can be taken to create a curved bottom for the header section?

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

Creating a triangle with SVG polygon: A step-by-step guide

The utilization of the Open Sans font family results in certain alterations to the user

Vertical spacing on elements utilizing a position of absolute

What is the process for dynamically looping through a table and adding form data to the table?

Struggling with converting my menu design into a dropdown menu

Utilizing ellipses within a list item to create a visually appealing design

Issue with excessive content causing scrolling difficulty

Animating two elements on scroll at specific point with speed problem

Having trouble with table sorting in Jquery?