Mal schauen, ob hier auch echte CSS-Cracks unterwegs sin. Folgende Problemstellung:
Bild 1:
Bild 1 zeigt einen Teaser-Container mit Textvorschau. Die Headline darf maximal zwei Zeilen hoch sein. Da das Ganze in mehrere Sprachen übersetzt wird und die Anzahl schmaler (i, l) und breiter Zeichen (M, W) unterschiedlich sein kann, wäre ein croppen der Headline nach xx Buchstaben unzuverlässig. Es muss also eine CSS-Lösung her. Einzeiligen Text per CSS zu croppen ist easy, bei mehrzeiligem wird es schon schwieriger. Ich habe deshalb ein Sass Mixin geschrieben.
Nun kann es allerdings auch sein, dass die Headline wie im folgenden Bild nur einzeilig ist.
In dem Fall soll die Headline nach unten gerückt werden, damit der gesamte Text wieder so hoch wie das Bild links wird. Eine CSS/Sass Lösung unter Einbeziehung obigen Mixins wäre diese (der Headline-Text ist in einen Link eingebettet).
Die Lösung gefällt mir aber nicht, weil ich hier position:absolute verwende (was ich hasse). Ein display:flex scheidet wegen IE9-Inkompatibilität aus. Per Sass könnte ich zwar den Value von $lines-to-show in einer Funktion abfragen, aber da dieser immer 2 beträgt (auch wenn denn die Headline nur einzeilig wird) gibt es keine if-else Unterscheidung. Andererseits erlaubt Sass afaik kein Abfragen der Höhe eines HTML-Elements (außer bei Images), und ich möchte das aus Performance-Gründen auch nicht mit JavaScript machen.
TL;DR: Es muss CSS sein. Fällt dazu jemandem eine bessere Lösung (ohne das leidige position:absolute) als mein obiger Code ein?
Bild 1:
Bild 1 zeigt einen Teaser-Container mit Textvorschau. Die Headline darf maximal zwei Zeilen hoch sein. Da das Ganze in mehrere Sprachen übersetzt wird und die Anzahl schmaler (i, l) und breiter Zeichen (M, W) unterschiedlich sein kann, wäre ein croppen der Headline nach xx Buchstaben unzuverlässig. Es muss also eine CSS-Lösung her. Einzeiligen Text per CSS zu croppen ist easy, bei mehrzeiligem wird es schon schwieriger. Ich habe deshalb ein Sass Mixin geschrieben.
Code:
@mixin truncate-multilines($font-size, $line-height, $lines-to-show) {
font-size: $font-size;
line-height: $line-height;
display: block;
display: -webkit-box;
max-height: $font-size*$line-height*$lines-to-show;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
Nun kann es allerdings auch sein, dass die Headline wie im folgenden Bild nur einzeilig ist.
In dem Fall soll die Headline nach unten gerückt werden, damit der gesamte Text wieder so hoch wie das Bild links wird. Eine CSS/Sass Lösung unter Einbeziehung obigen Mixins wäre diese (der Headline-Text ist in einen Link eingebettet).
Code:
h2 {
$font-size: 22px;
$line-height: 1.2;
$lines-to-show: 2;
height: $font-size*$line-height*$lines-to-show;
font-weight: normal;
margin: 3px 0;
position: relative;
a {
color: $custom-black;
@include truncate-multilines($font-size, $line-height, $lines-to-show);
position: absolute;
bottom: 0;
}
}
Die Lösung gefällt mir aber nicht, weil ich hier position:absolute verwende (was ich hasse). Ein display:flex scheidet wegen IE9-Inkompatibilität aus. Per Sass könnte ich zwar den Value von $lines-to-show in einer Funktion abfragen, aber da dieser immer 2 beträgt (auch wenn denn die Headline nur einzeilig wird) gibt es keine if-else Unterscheidung. Andererseits erlaubt Sass afaik kein Abfragen der Höhe eines HTML-Elements (außer bei Images), und ich möchte das aus Performance-Gründen auch nicht mit JavaScript machen.
TL;DR: Es muss CSS sein. Fällt dazu jemandem eine bessere Lösung (ohne das leidige position:absolute) als mein obiger Code ein?