Antwort an „Rolf B“ verfassen

problematische Seite

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.

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

--
sumpsi - posui - obstruxi
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen