Topics Search

Using Widows and Line Breaks

Using Widows and Line Breaks
Views: 1
A widow is a term used to describe a lone word at the end of a paragraph or headline. These lone words occur when the last word in a line of text wraps on to a new line due to a lack of available width. It’s more visually pleasing to have at least two words on a line and these widows are often seen as undesirable. An agency that I used to work at was so pedantic about them that I’ve become slightly OCD about ensuring they are nowhere to be seen – not so much in paragraphs of text but certainly in headings as far as possible. Here are some tips for removing widows and working with line breaks.
Sponsored Links:

Similar posts...

 

What are Widows and Orphans

What are Widows and Orphans Icon
More and more these days, CSS is being used to control the styling of things other than websites. One type of media that CSS can apply styling to is paged media – things like digital magazines and ebooks or a website in the form of a print stylesheet. There are some properties that only apply to this media type. The widows and orphans properties are two that allow us to control how lines of text flow around page breaks.
 

Flexbox and Truncated Text

Flexbox and Truncated Text Icon
Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!
 

Introducing the CSS text-align-last Property

Introducing the CSS text-align-last Property Icon
The text-align-last property is useful in this respect. It specifies how either the last line of a block or the line right before a forced line break will be aligned. This is important because the last line in a paragraph generally doesn’t have enough text to fill up the entire space. You may or may not notice the changes but it will improve the overall look of your website. This tutorial will cover all the aspects of the text-align-last property including acceptable values, support and browser specific behavior.
 

Collection of Line Menu Styles

Collection of Line Menu Styles Icon
The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today Mary Lou from Codrops shares a set of ideas for using the line as a design element in horizontal menus. There are many creative possibilities, some minuscule and subtle, others bold and more extravagant.
 

Three Line Menu Navicon

Three Line Menu Navicon Icon
In this article I'm going to focus on the "three line" symbol (as opposed to down arrows or other possible navicons). I quite like the three line symbol as a symbol to represent menus. If we have to pick one, I'm all for this one.
 

Line Height

Line Height Icon
With CSS, the height of a text line can be changed using the line-height property.
 

The CSS Line-Height Property

The CSS Line-Height Property Icon
The CSS line-height property acts in a similar way to leading in print design. It allows us to control the spacing between lines in paragraphs, headings and other text elements. line-height can also be used as a base to create consistent vertical rhythm and spacing throughout an entire project.
 

Setting the Line-Height

Setting the Line-Height Icon
In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the line-height property for you.
 

CSS Overflow

CSS Overflow Icon
The overflow property controls what happens to content that breaks outside of its bounds. The default value is visible. So imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible. Where if you set the overflow value to hidden, the image will cut off at 200px.
 

Block, Inline and Floating Elements

Block, Inline and Floating Elements Icon
A collection of 21 FAQs/tutorials tips on HTML formatting models. Clear answers are provided with tutorial exercises on block and inline elements, specifying padding spaces and margins, specifying border width and color, transparent and non-transparent backgrounds, positioning background images, line boxes and text paragraphs, setting line height.