Skip to content

Navigation Menu

Sign in
Sign up

Link's inline-flex anchor silently defeats an ancestor Text maxLines clamp #6021

Open

Description

Summary

Link renders its <a> with display: inline-flex. An inline-flex box establishes its own formatting context, so an ancestor's -webkit-line-clamp cannot clamp it — which makes the natural composition silently do nothing:

<Text maxLines={2}>
 <Link href={href}>{longTitle}</Link>
</Text>

Nothing renders wrong; the text simply runs on past the requested lines. Link's own maxLines works correctly (it puts the clamp on its inner Text span), so the fix at the call site is to pass maxLines to the Link — but the failing shape is the one people reach for first, and it fails quietly.

Measured

@astryxdesign/core@0.5.2, Chromium, 390px viewport, 260px text column, identical in light and dark. "content" is the unclamped line count of the same string.

pattern visible lines content lines truncates
<Link maxLines={2}> 2 4 yes
<Text maxLines={2}> 2 4 yes
<Text maxLines={2}><Link/></Text> 4 4 no
<Link maxLines={2} display="block"> 2 4 yes

The computed styles show why: the <a> is display: inline-flex, -webkit-line-clamp: none, and the clamp on the ancestor <span> (display: flow-root, -webkit-line-clamp: 2) has no effect on it.

Why it matters

A truncation that silently does not truncate is worse than one that errors: the layout looks plausible in the developer's short-title fixture and breaks on the first real record with a long address. It is also the composition the API invites — Text owns maxLines, Link owns the destination.

Suggested

Either render the anchor as inline (or flow-root) so an ancestor clamp applies, or — if inline-flex is load-bearing for the external-link icon and gap — document on both Link and Text that a Link child cannot be clamped by a Text ancestor and that Link must carry its own maxLines.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      AltStyle によって変換されたページ (->オリジナル) /