x
1
2
3
4
<div data-controller="midwest-prose" class="midwest-prose prose clamp" style="--clamp: 3;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi quam, consectetur viverra lacinia vel, ornare in ex. Vivamus vehicula, nisl vitae sollicitudin interdum, tortor ipsum congue libero, sed lobortis orci tortor eu neque. Sed at odio ut mauris suscipit dignissim ut non est. Fusce tristique neque eget magna rutrum, sit amet convallis odio ultrices. Phasellus accumsan leo sit amet magna imperdiet, vel dictum lorem sodales. Nullam vitae lectus rutrum, laoreet sapien vitae, faucibus ipsum. Nulla ac suscipit nulla. Donec lacinia sem non ipsum accumsan, ut lacinia ante aliquet.</p> <p>Mauris vehicula tellus a orci efficitur, sit amet pellentesque lectus sodales. Ut vestibulum felis eu ligula eleifend hendrerit. Quisque non gravida enim. Cras in leo hendrerit, imperdiet nunc ac, aliquet tellus. Curabitur in nisl fringilla, tincidunt sem a, facilisis velit.</p></div>1
2
3
4
<%= midwest_prose(max_lines: (params[:lines] || 3).to_i) do %> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi quam, consectetur viverra lacinia vel, ornare in ex. Vivamus vehicula, nisl vitae sollicitudin interdum, tortor ipsum congue libero, sed lobortis orci tortor eu neque. Sed at odio ut mauris suscipit dignissim ut non est. Fusce tristique neque eget magna rutrum, sit amet convallis odio ultrices. Phasellus accumsan leo sit amet magna imperdiet, vel dictum lorem sodales. Nullam vitae lectus rutrum, laoreet sapien vitae, faucibus ipsum. Nulla ac suscipit nulla. Donec lacinia sem non ipsum accumsan, ut lacinia ante aliquet.</p> <p>Mauris vehicula tellus a orci efficitur, sit amet pellentesque lectus sodales. Ut vestibulum felis eu ligula eleifend hendrerit. Quisque non gravida enim. Cras in leo hendrerit, imperdiet nunc ac, aliquet tellus. Curabitur in nisl fringilla, tincidunt sem a, facilisis velit.</p><% end %>Max Lines
Use max_lines: to truncate long prose with a line-clamp. The element
is collapsed by default and expands on click via the Stimulus controller.
| Param | Description | Input |
|---|---|---|
|
Number of visible lines before truncation |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Prose/max_lines
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."