UMD Web Utilities Library
    Preparing search index...

    Function truncateTextBasedOnSize

    • Truncates HTML text content based on container size with responsive breakpoints. Applies different text length limits based on the container width, making it suitable for responsive layouts where text truncation needs vary by viewport size.

      Parameters

      • text: {
            breakpointLarge?: number;
            breakpointMax?: number;
            size: number;
            text: string;
            textSizeLarge?: number;
            textSizeMax?: number;
            textSizeSmall?: number;
        }

        The HTML string to truncate

      Returns string

      The truncated HTML string with ellipsis if text was truncated

      const html = '<p>This is a very long text that needs responsive truncation</p>';

      // Small container (< 400px)
      const small = truncateTextBasedOnSize({ text: html, size: 300 });
      // Truncated to 220 characters

      // Large container (>= 400px)
      const large = truncateTextBasedOnSize({ text: html, size: 500 });
      // Truncated to 260 characters

      // Max container (>= 600px)
      const max = truncateTextBasedOnSize({ text: html, size: 700 });
      // Truncated to 280 characters