City of Tampa Style Guide

Truncate 8.9

Toggle example guides Toggle HTML markup

Truncate text after one line, overflow is hidden, works on headlines. Using CSS to truncate means it will always fill in the viewable space vs. truncating a string on the backend. OPTIONAL: Custom widths can be used with inline styles.

<insert-markup>typography.truncate-</insert-markup>

Untruncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

50% Truncated - This is a really long sentence, and can break the layout of the page so it can be helpful to truncate it as long as there is some way for the user to see it in full form such as on a details page.

Source: src/scss/base/_base.scss, line 309