Limit long text to a number of lines while offering a toggle button to reveal all the content.
Use expand text when you'd prefer to prevent very long text from taking over the page and making the layout look off, while still allowing a visitor to access the long content.
You may not want to offer access to very long text in situations where you're previewing content. For example, if you're rendering titles in search results, consider CSS line-clamp for those, and save the expand text pattern for the full record page where a visitor can get the full content.
Wrap any whole section of text. It works inside headings, paragraphs, or any other flow content.
Expand appears when the text meaningfully overflows. Short text or text that barely overflows the line threshold does not expand.
<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-flex-col pl-gap-m">
<h1>
<pennlibs-expand-text lines="2">
This heading expands. Nuevo y curioso romance, en que se declara lo que les sucedió á dos finos amantes llamados don Jacinto del Castillo, y doña Leonor de la Rosa : los cuales se embarcaron para Venecia y en medio de la mar fuéron apresados por unos cosarios argelinos, que dieron con ellos en la ciudad de Argel, donde fuéron quemados por la fe de Jesucristo
</pennlibs-expand-text>
</h1>
<p>
<pennlibs-expand-text>
This content does not expand.
</pennlibs-expand-text>
</p>
<p>
<pennlibs-expand-text>
This content does expand. The legacy of extraordinary contralto Marian Anderson is not limited to her musical genius. She performed a repertoire that included over 200 songs and arias in German, Italian, English, French, Spanish, Portuguese, Swedish, Finnish, and other languages. A review of her concert in Los Angeles on 16 June 1931 suggests something of the power of her stage presence:(, 17 June 1931). As a singer and as a symbol of progress in the advancement of civil rights in the twentieth century, Marian Anderson was perceived as larger-than-life, yet her approach to her life and career was practical and modest, with a deep understanding that nothing is accomplished without the assistance of others. Her career spanned the years from the early 1920s through the 1970s, although she formally retired from singing in 1965. Anderson's audiences in the United States would return year after year to her concerts. She was equally well received around the world, from her triumphs in the cities of Europe and South America at the height of her career in the 1930s to her tours of Asia for the United States Department of State in the 1950s. A strong believer in education as a key to racial and social equality and having a deep commitment to the well-being of children, she spent her retirement on the boards of dozens of non-profit organizations devoted to these causes. Childhood and Education On 27 February 1897 Marian Anderson was born at her parents' home at 1833 Webster Street in South Philadelphia. (Anderson's date of birth is from her birth certificate. On her passports and driver's license she gave her birth date as 27 February 1903.) Her father, John Berkeley Anderson--tall, good-looking, and popular--was remembered by neighbors as a fine singer. Her mother, Anna Delilah Rucker Anderson--small in stature, modest, and with a strong faith in God--had been a school teacher in her home town of Lynchburg, Virginia. Marian was born in a neighborhood that was the heart of African-American intellectual and social life in Philadelphia, and she grew up knowing many prominent families and individuals there, including Raymond Pace Alexander, J. C. Asbury, Dr. Henry Minton, Evelyn and Hobson Reynolds, Arthur Huff Fauset, Crystal Bird Fauset, and Bishop L. J. Coppin. Predominantly, it was a poor but vibrant neighborhood, home to Irish, Italian, and Jewish immigrants as well as African Americans moving from the rural southeastern states for job opportunities in the city. Marian played and went to school with children from varied backgrounds
</pennlibs-expand-text>
</p>
</div>
| Attribute | Description | Type | Default |
|---|---|---|---|
collapse-label | Label for the toggle when content is expanded. | string | 'Less' |
expand-label | Label for the toggle when content is collapsed. | string | 'More' |
lines | Maximum number of lines to show before truncating. | number | 3 |
| Slot | Description |
|---|---|
| The content to truncate. Accepts any flow content. |