Typography ~ Truncation
Unbreakable Layout
Prevent overly long text content from breaking your layout by using standardized solutions for truncation (vertical constraint) or word breaks (horizontal constraint).
Truncation
Simple text truncation can be achieved with the truncate class. Multi-line truncation can be accomplished using a javascript helper, where you declaratively set up the amount of lines to truncate to. For the most accurate results, do not apply padding or other spacing on the content to be truncated, instead apply such spacing on a wrapper element.
This is a long text that will span two lines, it will not be truncated.
This is a single line of text that will be truncated to a single line
This is a 2 line truncation using javascript. It will be truncated to two lines but not more.
This is a 3 line truncation using javascript. It will be truncated to three lines but not more. Let's see if this works.
Word breaks
Very long words that have no white-space will normally extend beyond their parent container, breaking the layout. The word break class avoids this. Alternatively, single line truncation can be used as another solution.