CSS fix needed to avoid long links causing tables to overflow intented table width

[reteP-riS]

There's a very long link in one of my INDI:NOTE records, like in this example: https://www.example.com/archive/streetlist?tx_sitstreets_streetlist%5Baction%5D=show&tx_sitstreets_streetlist%5Bcontroller%5D=Street&tx_sitstreets_streetlist%5Bstreet%5D=1345&type=4711&cHash=43d41c0e195ad09297b97aa5378e7cf5 Although webtrees breaks the link after the question mark the size of the table on the webtrees notes tab still increases under the "Extra Information" box and even beyond the screen width with no horizontal scrollbar. This generally leads to all text in that 2nd column to extend beyond the screen width and disappear. I applied a dirty fix (marked green) via the CSS & JS module, but maybe there's a better way to fix this so that the fix can be applied to all kind of tables or texts. .wt-facts-table {word-break: break-word; !important;} There may be one more CSS issue. Should the class be wt-tab-notes instead of wt-tan-notes (marked yellow)?

[fisharebest]

The typo in the class name was fixed in #5082

For the word-break, we already have a class ut (user text) which does this.

We need to apply this ut class to the note formatter. This happens in class MarkdownFactory.

Either:

• we can add <div class="ut">...</div> or <span class="ut">...</span> as appropriate
• there's a config option to the markdown processor that lets add classes to the parent element

[reteP-riS]

Thanks for your quick reply!

I don't use markdown, just plain text because I import different GEDCOM files from other applications on a regular basis. Would the class="ut" work without markdown, too?

[fisharebest]

Even if you don't use markdown, webtrees still uses the markdown-renderer - but with most of the formatting options turned off. Mostly, it just converts the links.

[reteP-riS]

I did a few more tests. Found out that word-break: break-word is depracated. If I understand this correctly the class="ut", i.e. overflow-wrap: break-word does NOT do the trick, but overflow-wrap: anywhere does, because only this one will break even these long links.

Unfortunately the temporary fix I applied to the wt-facts-table had undesirable effects on the first column and on other tabs. I now changed this to .wt-fact-value {overflow-wrap: anywhere !important;} and that seems to work fine even on a tablet.

Whatever is the best method I'd really appreciate if this could be fixed. Thank you!