Skip to main content

InLink Smart Wrapping Demo

This page demonstrates how the InLink component handles text wrapping, especially with parentheses.

Default Behavior (Smart Wrap Enabled)​

The InLink component automatically inserts zero-width spaces before opening parentheses, allowing text to break at those points when needed:

Multiple Parentheses​

The component handles multiple sets of parentheses:

Word Breaking​

If text still overflows after breaking at parentheses, it will break between words:

Disabled Smart Wrap​

You can disable smart wrapping by setting smartWrap={false}:

Usage​

import InLink from '@site/src/components/global/InLink';

// Default usage with smart wrapping
<InLink href="/docs/example">
  Text with (parentheses) that will wrap smartly
</InLink>

// Disable smart wrapping
<InLink href="/docs/example" smartWrap={false}>
  Text with (parentheses) without smart wrapping
</InLink>

How It Works​

  1. The component automatically inserts a zero-width space (\u200B) before each opening parenthesis
  2. The CSS allows normal text wrapping (white-space: normal)
  3. If text still overflows, it uses word-break: break-word to break long words
  4. The visual appearance of the text remains unchanged - the zero-width spaces are invisible

This ensures that:

  • Text preferentially breaks before parentheses when space is limited
  • Long words that still overflow will break to fit the container
  • The link remains readable and maintains its styling