How to make the url link shorter in edit mode?

[LiZheCN]

Obsidian - Make your links look better in 5 minutes

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

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 edi…

I already checked these two links. Not worked.

I already install the plugin CodeMIrror options and add the css snippet with content(As the video said)

/*Source: https://santiyounger.com/obsidian-shorter-links/*/

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

But My url link not changed. How to fix it?

[suliveevil]

How can you edit something without seeing it?

Use Live Preview instead:

Live preview update - Obsidian Help

[LiZheCN]

I use preview mode now. But I still dont want to see the entire long url when edit this line, I dont need to edit the url usually. In the videe you can see there is a button to collapse the url. I want something like it.

[suliveevil]

Change your theme.

[LiZheCN]

how to change it ? I follow the step in a Youtube video but not work.

[efemkay]

others may need few info before they can assist you. let us know the following

• are you using obsidian v1.0.3? if not, best to update. current version has the “shorter” link by default already. go to Settings > About and note the Current Version and Installer Version
• which community theme you’re using? or is it default theme? it could be an old theme still makes the url long

here’s how external url inside the recent obsidian (v1.0.3) with default theme looks like

shortened, in edit mode

expanded (by putting cursor inside the text), in edit mode