How can I manage too long URL that break the responsive design?

http://www.cop.es/colegiados/PV00520/pdf/C%C3%B3mo%20superar%20obsesiones23.pdf

This forum cannot manage them but at least they don’t break the max-width limit

[@webcreations907 Participant 4 years, 9 months ago]

How about the below?

#bbpress-forums div.bbp-reply-content a, 
#bbpress-forums div.bbp-topic-content a{
	word-wrap: break-word;
}

[@sirlouen Participant 4 years, 9 months ago]

Good idea, I’m going to test it

[@sirlouen Participant 4 years, 8 months ago]

@webcreations907, did not work as expected 🙁 URLS are not being broken with that for some reason

[@webcreations907 Participant 4 years, 8 months ago]

Maybe you don’t have those selectors / class names on your theme? Not sure what theme you’re using, but when I test on this forum, in Chrome & Safari adding the above fixes the overflow issue, Firefox didn’t seem to have a issue.

Try the below, you might have to refresh your browser so it loads the changes.

.bbp-reply-content a, 
.bbp-topic-content a{
	word-wrap: break-word;
	word-break: break-word;
}

[@sirlouen Participant 4 years, 8 months ago]

Ok, the problem wasn’t the rule itself, the problem was the css property: word-wrap was not doing the job with the links

Word-break seems to have solved the issue now.

According to this:
https://developer.mozilla.org/es/docs/Web/CSS/overflow-wrap

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

This was the problem somehow (not sure how though)

[@webcreations907 Participant 4 years, 8 months ago]

That’s great, isn’t browser compatibility fun? 🙂