Truncate

Truncate is a component that truncates text based on various criteria: lines, words, or characters.

                                                
                                                import { Truncate } from '@alma-oss/spirit-web-react';
                                                
                                                export const Example = () => {
                                                  return <Truncate>{/* Text go here */}</Truncate>;
                                                };

ℹ️ Best Practices: For comprehensive guidance on when and how to use truncation, handling translations, and component-specific guidelines, see the Content Truncating Guidelines.

Truncation Modes

The component supports three truncation modes using the mode prop:

Lines

Truncate text to a specific number of lines using mode="lines" and limit props:

                                                
                                                <Truncate limit={2} mode="lines">
                                                  {/* Text go here */}
                                                </Truncate>

Words

Truncate text to a specific number of words using mode="words" and limit props:

                                                
                                                <Truncate limit={10} mode="words">
                                                  {/* Text go here */}
                                                </Truncate>

Characters

Truncate text to a specific number of characters using mode="characters" and limit props:

                                                
                                                <Truncate limit={50} mode="characters">
                                                  {/* Text go here */}
                                                </Truncate>

Content Compatibility

The truncation modes have different requirements for the content they can process:

Examples

✅ Works - Plain text with any mode:

                                                
                                                <Truncate mode="words" limit={10}>
                                                  This is plain text that can be truncated
                                                </Truncate>

✅ Works - Formatted text with lines mode:

                                                
                                                <Truncate mode="lines" limit={2}>
                                                  Text with <strong>emphasis</strong> and <a href="#">links</a>
                                                </Truncate>

❌ Doesn't work - Formatted text with words or characters mode:

                                                
                                                <Truncate mode="words" limit={10}>
                                                  Text with <strong>emphasis</strong> {/* Won't truncate properly */}
                                                </Truncate>

Expandable Example

This example demonstrates how to make truncated text expandable, allowing users to toggle between the truncated and full content.

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Text, Truncate } from '@alma-oss/spirit-web-react';
                                                
                                                const Example = ({ children }) => {
                                                  const [isExpanded, setIsExpanded] = useState(false);
                                                
                                                  return (
                                                    <>
                                                      <Text>
                                                        {isExpanded ? (
                                                          children
                                                        ) : (
                                                          <Truncate limit={2} mode="lines">
                                                            {children}
                                                          </Truncate>
                                                        )}
                                                      </Text>
                                                
                                                      <Button onClick={() => setIsExpanded(!isExpanded)}>{isExpanded ? 'Show Less' : 'Show More'}</Button>
                                                    </>
                                                  );
                                                };

API

The components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.