Hide or Truncate URLs in Editor using CSS? (one year later)

[looper]

I’d like to implement what’s described at this other post Hide or Truncate URLs in Editor using CSS? - Resolved help - Obsidian Forum to solve the problem explained there:

“Some URLs [in the editor view] are very long…Without having to use a URL shortener of some kind, is there some way to use CSS that could hide this from view in the editor?”

I tried the CSS solution found there, but while it shortens URLs beautifully, if you try to edit a URL, weird things happen instead:

• if you try to edit by mouse selection, the URL reverts to the symbol replacement
• if you try to use Backspace or Delete keys on the keyboard, it deletes text after the URL instead
• using the arrow keys, you can navigate the first line of the URL, but if the URL wraps to multiple lines, the cursor cannot go to the 2nd or later line (the URL will revert to the symbol)

I’m wondering if maybe the CSS worked in previous versions of Obsidian but is now broken.

Here’s the CSS in question:

    font-size: 0;
}
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗';
    font-size: 1rem;

Edit: I think this is prob. how it always behaved. For now I’m using a link-shortening service as a workaround instead of the CSS.

Edit #2: At least the mouse-selecting portion of this bug was previously known. At the moment all of the buggy behavior is resolved by the CodeMirror Options plugin, mentioned here: CSS 'Active Line' Fails When Highlighting Text - #5 by jokysatria

[macedotavares]

I know you didn’t ask for advice on this, but here’s mine:

Don’t use URL shorteners on your notes — not if you want them to be useful in 10 years, at least. The chances of the website itself being up by then are slim to begin with; if you throw an external service in there, that’s one more place where things can break. (Not to mention that the URL becomes a lot less informative.)

I have huge strings of multiple URLs for each website I intend to keep, and I’d really like to hide them from view, but the upside is that I have full html backups on Dropbox and archive.is snapshots. I think it’s worth it.

[anon12638239]

You can use reference-style markdown links and dump long URLs at the bottom of notes.

Angel

You can use [reference-style markdown links][1] and dump long URLs at the bottom of notes.

[1]: https://daringfireball.net/projects/markdown/syntax#link

[looper]

Thanks; that’s a good point. At the moment I’m using the plugin CodeMirror Options which fixes the CSS bug so I don’t have to use a link-shortening service. The author of the plugin thinks it might break soon but…we’ll cross that bridge then…

[looper]

Ah, that’s pretty cool. The disadvantage is that when in Edit mode, I can’t Ctrl-click or Alt-Enter on the reference link to open the webpage (or even to jump down to the footnote, I don’t think)…

At the moment, I’m using the CodeMirror plugin, which fixes the CSS bug. So, problem solved for now! Thank you for the recommendation though. It’s definitely one solution.