Use CSS to Prevent Long URLs from Breaking Out Tiddler

[kookma]

Copy and paste URLs from Browser address bar when taking notes with TW is quite common.
While you can use pretty link using [[short-title|long-url]] but most of time you just paste the url directly in tiddler text.
This makes breaking out the tiddler and overflows out of tiddler boundary.

I use the Cheis Coyier tip prevent-long-urls-from-breaking-out-of-container

Is it worth to add this to vanilla theme as below?

.tc-tiddler-frame a
 {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap:     break-word;
  word-break:    break-word;
  
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;

}

[pmario]

IMO at tiddlywiki.com there is no such problem. See screenshot below. If there is one, you need to be more specific.

If there is a problem with tables, there are some pending PRs, that should deal with it.

[kookma]

Hi @mario!
I have the issue in TiddlyWIki tables. Where are the PRs you mention? Is there a chance to be merged?

[kookma]

It seems in 3.5.3, the issue has gone! I keep this open to inform you after through evaluation.

[kookma]

I found some issues

1. open https://tiddlywiki.com/prerelease/
2. press shift+alt+Down to swicth layout to bigger siderbar small tiddler width
3. create a new table as below

|Some Title |Url |
|A very big big address |https://www.isna.ir/news/1403043120067/%D8%B6%D8%B1%D9%88%D8%B1%D8%AA-%D8%A8%D8%A7%D8%B2%D9%86%DA%AF%D8%B1%DB%8C-%D9%85%D8%A7%D9%84%DB%8C%D8%A7%D8%AA-%D8%A8%D8%B1-%D8%AF%D8%AE%D8%A7%D9%86%DB%8C%D8%A7%D8%AA-%D9%82%D8%A7%DA%86%D8%A7%D9%82-%D9%85%D8%B9%DA%A9%D9%88%D8%B3-%D8%AF%D8%AE%D8%A7%D9%86%DB%8C%D8%A7%D8%AA-%D8%A8%D9%87-%D8%AF%D9%84%DB%8C%D9%84 |

See the overflow

If I add the below CSS in tiddler tagged with $:/tags/Stylesheet the issue goes away!

.tc-tiddler-frame a
 {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap:     break-word;
  word-break:    break-word;
  
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;

}

see

[Jermolene]

Thanks @kookma this would definitely be worth fixing. However, I notice that the problem isn't confined to links. If I change the https link in your example to not be a link the problem still occurs:

|Some Title |Url |
|A very big big address |hxttps://www.isna.ir/news/1403043120067/%D8%B6%D8%B1%D9%88%D8%B1%D8%AA-%D8%A8%D8%A7%D8%B2%D9%86%DA%AF%D8%B1%DB%8C-%D9%85%D8%A7%D9%84%DB%8C%D8%A7%D8%AA-%D8%A8%D8%B1-%D8%AF%D8%AE%D8%A7%D9%86%DB%8C%D8%A7%D8%AA-%D9%82%D8%A7%DA%86%D8%A7%D9%82-%D9%85%D8%B9%DA%A9%D9%88%D8%B3-%D8%AF%D8%AE%D8%A7%D9%86%DB%8C%D8%A7%D8%AA-%D8%A8%D9%87-%D8%AF%D9%84%DB%8C%D9%84 |

[kookma]

Good catch! I did not note to it!

[pmario]

This seems to be a Chrome-like problem. With FF it works just fine. I'll have a closer look to the applied CSS.
Screenshot uses Fixed story, fluid sidebar setting

[pmario]

In FF it seems body.tc-body already defines word-wrap:break-word and overflow-wrap:break-word, which the A element inherits.

[kookma]

In FF it seems body.tc-body already defines word-wrap:break-word and overflow-wrap:break-word, which the A element inherits.

Thank you! Yes in FF, I donot see the overflow, BUT in Chrome, I see the overflow

[kookma]

If we change TD style from overflow-wrap:break-word to overflow-wrap:anywhere it does this:

This seems to work in Edge/Chrome/FF.

[pmario]

It seems in Edge, if I define word-wrap::word-break and overflow-wrap:word-break for me overflow-wrap gets disabled. So it seems word-wrap has precedence in Edge. :/ Strange.

[pmario]

This seems to work in Edge/Chrome/FF.

Yes -- but the first table cells are made much smaller and unreadable. With some CSS I would go with

td em,
td a {
  overflow-wrap: anywhere;
}

So it would be easy to make veryLongStringsWhithNoSpaces italic eg: //veryLongStringsWhithNoSpaces// which covers them in an EM element, which will be broken anywhere. -- Just a workaround

[kookma]

Yes, when table layout is not fixed, for above case the first column gets very narrow!