• Resolved Adrean

    (@adrean)


    Hi,

    I wrote an informativ article with many footnotes and links. Sadly the links do not line break (except the once containing “-” by accident). The max with is set around 650px or so… but the links don’t care.

    Does anyone know how to fix this?

    Thank you and have a great day,

    Adrean

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi there @adrean – this behaviour isn’t specific to links; long text will not have any line breaks, either.

    To avoid this problem, I would recommend not pasting long text in this way. For example, you could put a link on the word “URL” instead.

    If you really prefer to force arbitrary word breaks at the end of each line, you can add this custom CSS to the site-wide CSS editor, which is available in WordPress 6.2:

    /* Post content block - force word breaks */
    .wp-block-post-content {
      word-break: break-all;
    }

    Let me know how it goes.

    Thread Starter Adrean

    (@adrean)

    Thanks a lot @zoonini

    I tried the Code, but now every line everywhere breaks abruptly in the middle of a word. Not possible to use.

    I like the idea about putting the links in words, but i actually would prefer to remove the hyperlink all together, so that the link is only in like plain text and not directly clickable.

    Do you have any other idea? I wonder how other websites solve this, must be a common issue, no?

    Otherwise don’t worry to much, thanks a lot already. I will think about possible workarounds.

    Happy Easter and thank you

    Moderator Kathryn Presner

    (@zoonini)

    Hey there @adrean – could you please try this variation instead?

    .wp-block-post-content {
      word-break: break-word;
    }

    If that still doesn’t work well, another option would be to:

    1. Put your footnotes in a Group block.
    2. Add a custom class to the group in the “Additional CSS class(es)” section (for example: footnotes)
    3. Then using a more targetted piece of CSS like:
    .wp-block-group.footnotes  {  
        word-break: break-word;
    }

    i actually would prefer to remove the hyperlink all together, so that the link is only in like plain text and not directly clickable.

    You can certainly go ahead and remove the links, URLs are not required to be clickable. (This won’t have any effect on the line breaks, though.)

    Thread Starter Adrean

    (@adrean)

    Amazing! Thank you @zoonini

    .wp-block-post-content {
      word-break: break-word;
    }

    This one seems to be working perfectly. Couldn’t spot any issues neither on mobile nor on desktop. Works like a charm, helps me a lot.

    Thank you and have a great day

    Moderator Kathryn Presner

    (@zoonini)

    Excellent, glad that does the trick! Cheers.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Links do not line break’ is closed to new replies.