WP-Mix

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.