Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

I want to enable line breaks for anchors (hyperlinks)

01 Jan 2020, 16:57

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 :-). 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

01 Jan 2020, 21:23

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)
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

01 Jan 2020, 21:26

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.
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

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

06 Jan 2020, 05:13

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?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

06 Jan 2020, 05:46

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;
}
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

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

06 Jan 2020, 06:51

Partially it does, yes. The "block" which usually appears around the links is gone, the hover effect itself remains. 
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

06 Jan 2020, 08:30

Not quite sure what "block" you are referring to. Do you have a link? When I test here, the hover effect remains.
 
User avatar
ulfklose
Experienced
Topic Author
Posts: 48
Joined: 10 Dec 2019, 09:10

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

07 Jan 2020, 17:41

Sure. Please see the second to last section, there's a hyperlink with a line break in it.

https://www.ulfklose.wedding/faq/
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

07 Jan 2020, 21:53

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>