WordPress Code Snippets

A fresh mix of code snippets and tutorials

Shorten text with CSS

80

There are several ways to shorten text, depending on the situation and goals. It’s preferable in most cases to shorten text server-side via PHP, but also possible to shorten via jQuery or even CSS.

Shorten text with CSS

To shorten text content with CSS, apply the following rule to your stylesheet:

h3 {
	width: 100px; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	}

This will shorten text in the h3 tag, based on 100px width, and truncated with an ellipsis. Here is another example of shortening text in bbPress:

.bbp-author-name {
	max-width: 100px; 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	}

This snippet is handy for tight forum designs where long usernames might break the layout (or whatever). Note the use of max-width instead of width; this is useful for flexible width layouts.

To just clip the text instead of adding the ellipsis, replace ellipsis with clip.


Show Support

Like our new Facebook Page to show support!