Odd issue with render link

[rokh]

I have a template which works as expected. Testing the responsive design mode in browser (and later also on actual device) i noticed one particular piece of content (using the same template as the others) is overflowing on X axis on phone sized screens (overflowing as in screen can be scrolled left and right, content stretches off screen etc)

Eliminating things down on by one i found this seems to be the issue

[Rockefeller Commission](https://en.wikipedia.org/wiki/Advisory_Committee_on_Government_Organization
 "Rockefeller Commission")

More specifically it is the Wiki URL. If replaced by some other the issue is gone.

My render-link.html is

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}" {{ end }}{{ if strings.HasPrefix .Destination “http” }} target="_blank" rel=“noopener”{{ end }}>{{ .Text | safeHTML }}

(closing a wont show for some reason)

Is the URL too long? Are there too many underscores in it?

I wont post the direct link to content as it comes across as self advertising. But i did some “testing” and if i change the URL to something else the overflow problem is gone.

[Heracles]

This is a front-end issue, so it’s your CSS mix that we should be debugging, unless you are indeed missing that closing </a> tag in your render-link.html.

You could try something like a { word-wrap: break-word; } in your styles and see if that resolves it. It is also probably due to the styles of the parent container, but still, impossible to know from hugo template code.

[rokh]

The closing tag is there it just wont show here.

I will try to see if it is a styling issue. I just don’t understand what exactly.

[rokh]

you are correct.

break-all

fixed it. I dont understand why exactly to be honest since the URL length does not impact the text within the which was always the same no matter the URL but it works with break-all

Fortunately i can easily set word-break based on screen size so it was a quick fix. Hope it wont break something else.

thx