Warum greift die CSS-Eigenschaft nicht?

[Rolf B]

Hallo Gunnar,

Oooookeeeh... nach diesem Hinweis habe ich noch mal die Spec gelesen. MDN formuliert das ziemlich knapp so:

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.

Aber das sind nur 90% der Wahrheit. Die strahlende Ausnahme heißt „atomic inlines“. Das sind inline-Elemente, die einen neuen Formatierungkontext erzeugen. Beispielweise <span style="display:inline-block"></span>. Auf die wird die Unterstreichung nicht propagiert. „Nur“ ein Block-Element reicht nicht, auch nicht mit den diversen Klimmzügen zum erstellen eines Block Formatting Context (contain:content oder overflow:hidden oder display:flow-root).

Die generische Lochstanze für den Schuhkarton sähe also so aus:

{{Card|

titel=<span class="nolink">Artikel der Woche</span><br>
Wie man Löcher in Schuhkartons stanzt|
...
}}

mit dieser Regel im Skin (Selfhtml + Makeover):

.card .card-title .nolink {
  display: inline-block;
  color: var(--text-color);
}

Der <br> ist unvermeidlich, weil ich ja ein inline-Element brauche. Auf ein Zusatzdiv um den span herum habe ich keine Lust…

Ich habe das in Matthias' cardifiziertem Experiment mal eingebaut.

• Ansicht im Selfhtml-Skin
• Ansicht im Makeover-Skin

Seiteneffekt ist: inline-block Elemente brechen erstmal als Ganzes um und nur wenn der Platz nicht reicht, wird innerhalb des inline-block Elements umgebrochen. Für den hier gesuchten Zweck ist das aber gerade erwünscht.

Rolf