Hide or Truncate URLs in Editor using CSS?

Actually, I may have come up with something:

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;
}

When your cursor is on the active line, you’ll see the full URL (so you can edit it) and if it’s not the active line, it’s hidden with a single character (in this case 🔗) shown in its stead.

(Thanks to @Silver for exposing the active line with a CSS class :+1:)

27 Likes