Content Limiter
The Content Limiter system automatically restricts the height of content areas based on the view type, ensuring consistent layouts. When content exceeds the height threshold, it adds a class that makes text smaller, but content might still overflow. It should be used together with the Content component for proper formatting.
Basic Usage
To enable automatic content limiting, add the data-content-limiter="true"
attribute to your content element.
Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble origins.
Objectively composed of unrelated words, Lorem ipsum owes its existence to Marco Tullio Cicerone and to some steps of his De finibus bonorum et malorum (The highest good and the highest evil) written in 45 BC, a classic of Latin literature dating back more than 2000 years ago.
The discovery was made by Richard McClintock , a professor of Latin at Hampden-Sydney College in Virginia, who faced the impetuous recurrence of the dark word consectetur in the text Lorem ipsum researched its origins to identify them in sections 1.10.32 and 1.10.33 of the aforementioned Cicero's philosophical work.
The words taken from one of the dialogues contained in the De finibus are therefore the pieces of the most famous nonsensical text in the world.
A discovery that has given greater importance to the Lorem ipsum which has remained on the crest of the wave since 500, that is when, according to Professor Richard McClintock, its use spread among the printers of the time.
Of course we know that to make it known to most was a publicity of the Sixties, that of the transferable Letraset character sheets: transparent adhesive sheets on which the Lorem ipsum text was imprinted easily transferable on the editorial products before the advent of the computer.
Content Limiter
Text Exceeding Threshold
Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble origins.
Objectively composed of unrelated words, Lorem ipsum owes its existence to Marco Tullio Cicerone and to some steps of his De finibus bonorum et malorum (The highest good and the highest evil) written in 45 BC, a classic of Latin literature dating back more than 2000 years ago.
The discovery was made by Richard McClintock , a professor of Latin at Hampden-Sydney College in Virginia, who faced the impetuous recurrence of the dark word consectetur in the text Lorem ipsum researched its origins to identify them in sections 1.10.32 and 1.10.33 of the aforementioned Cicero's philosophical work.
Content Limiter
Text Within Threshold
<div class="content" data-content-limiter="true">
<p>Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble...</p>
</div>
When content exceeds the height threshold (which varies by view type), it will add the content--small class to make text smaller.
Note that this does not automatically truncate overflowing text. For text truncation with ellipsis, use the Clamp component.
Custom Height Threshold
You can specify a custom maximum height using the data-content-max-height attribute.
Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble origins.
Objectively composed of unrelated words, Lorem ipsum owes its existence to Marco Tullio Cicerone and to some steps of his De finibus bonorum et malorum (The highest good and the highest evil) written in 45 BC, a classic of Latin literature dating back more than 2000 years ago.
Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble origins.
Objectively composed of unrelated words, Lorem ipsum owes its existence to Marco Tullio Cicerone and to some steps of his De finibus bonorum et malorum (The highest good and the highest evil) written in 45 BC, a classic of Latin literature dating back more than 2000 years ago.
Content Limiter
Custom Max Height: 140px
<div class="content" data-content-limiter="true" data-content-max-height="140">
<p>Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble...</p>
</div>
<div class="content" data-content-limiter="true" data-content-max-height="140">
<p>Contrary to what one might think, the Lorem ipsum text, despite being meaningless, has noble...</p>
</div>
Default Height Thresholds
If no custom height is specified, Content Limiter uses the following default thresholds based on view type:
view--full
400px
view--half_vertical
400px
view--quadrant
160px
view--half_horizontal
160px