Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link in Card Obstructs Text Wrap #400

Open
wesleyboar opened this issue Sep 23, 2024 · 0 comments
Open

Link in Card Obstructs Text Wrap #400

wesleyboar opened this issue Sep 23, 2024 · 0 comments

Comments

@wesleyboar
Copy link
Member

wesleyboar commented Sep 23, 2024

Overview

A card with a paragraph that has a link that spans multiple lines will fail to render text around the link inline with the link.

Steps

  1. Have a <div class="c-card …">.
  2. In that .card, have a <p>Lots of silly text. … Lots of silly text.</p>.
  3. In that <p>, have a "Very very long name." link.
  4. Make the card narrow enough for the link to wrap two lines.

Expected

The following all wraps as one line of text:

Lots of silly text. Very
very long name.
Lots
of text.

good

Actual

The link in the following is treated independent of the text around it:

Lots of silly text.
Very very long
name.

Lots of silly text.

bad

Workaround

A. With Bootstrap loaded, add a class d-inline on the link.
B. Without Bootstrap, add style display="inline" or display: unset.

problem fix
bug fix
@wesleyboar wesleyboar changed the title Link in Card Prevents Text Wrap Link in Card Obstructs Text Wrap Sep 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant