Don't wrap headings when containing specific characters?

Custom CSS & Theme Design
1

I want all H2 headings that contain specific symbols (✎ ✄ ✑) to not wrap under when the note width shrinks. In other words, I want such headings to be always displayed as a single line no matter the editor width:

image
image1448×338 69.5 KB

Not like this:

image
image1030×400 72.4 KB

The dots are just plain ol’ regular dots (...).

Claude got me halfway there with:

/* Reading View */
.markdown-preview-view h2[data-heading^="✎"],
.markdown-preview-view h2[data-heading^="✄"],
.markdown-preview-view h2[data-heading^="✑"],
/* Live Preview */
.cm-content .cm-line .cm-header-2,
.cm-line:has(.cm-header-2[text^="✎"]),
.cm-line:has(.cm-header-2[text^="✄"]),
.cm-line:has(.cm-header-2[text^="✑"]) {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

This works perfectly in Reading view.

Problem: for Live Preview, this fails to match the desired behavior for headings with these symbols only. This makes it so that all H2 headings don’t wrap.

Any pointers? :pray:

Also asked on Discord.

2

This line is the catch it all line, as it targets all the .cm-header-2 lines and ends the selector with the comma. So for starters try without this line.

1 Like
3

Yep, got pointed out on Discord also. When I remove the line, all H2 headings wrap as usual, meaning the rest of the code doesn’t do anything.

Folks there think that what I want is not doable in Live Preview :pensive:

Guess I’ll have to make do with a divider line below each heading that I set in the Style Settings for the Minimal Theme.

4

In live preview none of the actual header text are copied into any of the attributes of the DOM elements. This means there is nothing for your CSS selector to grab a hold on. In reading mode the header text is copied into the data-heading attribute allowing for that to work.

So you’ll need to add something to your headings which you can target from CSS, and I’ve recently used tags for this purpose. One option could therefore be to use something like #no-wrap, and target the headings with .cm-header-2:has(.cm-tag-no-wrap) or similar. If you don’t like the visual appearance of the tag, you could just hide it using display: none for that tag.

1 Like