Page 1 of 1

I want to enable line breaks for anchors (hyperlinks)

Posted: 01 Jan 2020, 16:57
by ulfklose
I already tried this by modifying the CSS for hyperlinks but ended up with a hover behavior that lost part of the hover effect. Is there a way to prevent that from happening?

And happy new year to everyone :-). 

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 01 Jan 2020, 21:23
by mjau-mjau
I'm not sure in this context what you mean by "enable" line-breaks. A line-break in html is represented by <br>, and you can easily add line-breaks to any anchor links using HTML:
Code
<a href="https://www.photo.gallery">this is<br>a test<a>
Or markdown:
Code
[this is<br>a test](https://www.photo.gallery)

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 01 Jan 2020, 21:26
by mjau-mjau
Or do you mean you want existing anchor links to be able to wrap onto new lines? Likely you will need to override white-space: nowrap; and set it to white-space: normal; for links. This might have a negative effect on hover effects for links that wrap onto new two lines.

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 06 Jan 2020, 05:13
by ulfklose
mjau-mjau wrote: Or do you mean you want existing anchor links to be able to wrap onto new lines? Likely you will need to override white-space: nowrap; and set it to white-space: normal; for links. This might have a negative effect on hover effects for links that wrap onto new two lines.
Sorry for the confusion, yes, this is, what I want. I already tried setting the white-space attribute to normal but the nice hover effect disappears. There's nothing I can do against this, right?

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 06 Jan 2020, 05:46
by mjau-mjau
How did you set it? If you set it via CSS, I believe you should keep the hover effect, but it may look strange when links break onto new lines. Settings > Custom > Custom CSS:
Code
.content a {
  white-space: normal !important;
}

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 06 Jan 2020, 06:51
by ulfklose
Partially it does, yes. The "block" which usually appears around the links is gone, the hover effect itself remains. 

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 06 Jan 2020, 08:30
by mjau-mjau
Not quite sure what "block" you are referring to. Do you have a link? When I test here, the hover effect remains.

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 07 Jan 2020, 17:41
by ulfklose
Sure. Please see the second to last section, there's a hyperlink with a line break in it.

https://www.ulfklose.wedding/faq/

Re: I want to enable line breaks for anchors (hyperlinks)

Posted: 07 Jan 2020, 21:53
by mjau-mjau
I couldn't see any link <a> with line-break <br>:
Image

I did however inject a <br> tag from inspector, and I see now that it doesn't work. Unfortunately, this is because the hover background effect is set in position: absolute on the elements :after pseudo element. This is to be able to use padding on the background, without affecting the link itself. Unfortunately, this positioning is simply not compatible with breaking a link across two lines, because the link is simply not a "block" any more.
Image

The only solution, is to DISABLE the special link hover style by using class="no-link-style" if/when you need to break a text link across multiple lines. It can be done for a single link:
Code
<a href="/kontakt/" class="no-link-style">sprecht uns <br>einfach an</a>
Or you can add it to a container element, in which case it will affect all links inside:
Code
<div class="no-link-style">
  <a href="/kontakt/">sprecht uns <br>einfach an</a>
  some text
  <a href="/kontakt/">sprecht uns <br>einfach an</a>
</div>