• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie würdet Ihr das lösen?

T

Tronjer

Senior HTML'ler
Mal schauen, ob hier auch echte CSS-Cracks unterwegs sin. Folgende Problemstellung:

Bild 1:
Bildschirmfoto 2015-11-11 um 21.00.17.png

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.
Bildschirmfoto 2015-11-11 um 21.00.55.png

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?
 
Werbung:
Tronjer schrieb:
Fällt dazu jemandem eine bessere Lösung (ohne das leidige position:absolute) als mein obiger Code ein?
Zum Vergrößern anklicken....

Nein, habe einiges versucht aber nichts hat geklappt.
Die einzige Möglichkeit die ich gefunden habe um den Einzeiler nach unten zu bringen war eine Mischung aus display:inline-block, Pseudo-Element :before und vertical-align:bottom.
Aber dann wurden leider die Punkte nicht mehr angezeigt.

So schlimm finde ich das position:absolute aber auch nicht.
 
Werbung:
Probier mal, aber ob es dann noch mit den Pünktchen funktioniert, weiß ich nicht.
Code: 
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
* {
 margin:0;
 padding:0;
}
section {
 border:1px solid #000;
 width:300px;
}

header {
 height:4em;
 line-height:2em;
 width:300px;
 background:#eee;
 overflow: hidden;
 position:relative;
}
header:before {
 content:"";
 height:4em;
 display:inline-block;
 vertical-align:bottom;
}
header h2 {
 font-size:2em;
 display:inline-block;
 vertical-align:bottom;
}

p {
 padding:10px;
 background:#ada;
}
</style>
</head>
<body>
<section>
<header><h2>Überschrift</h2></header>
<p>Text</p>
</section>
<section>
<header><h2>Das ist eine Überschrift</h2></header>
<p>Text</p>
</section>
</body>
</html>
 
Ganz so geht es leider nicht. Wenn ich die h2 verlängere:
Das ist eine Überschrift Das ist eine Überschrift Das ist eine Überschrift

wird sie verdeckt.

Ich werde morgen mal was mit display: table-cell versuchen.
 
Werbung:
Hm, bei mir nicht, aber das kann natürlich sein und die Ursache könnte line-height sein. Das passiert auch wenn dei Schriftgröße geändert wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben