text-overflow mit 2 Zeilen

M

MichaA

Mitglied
Ist es möglich den Text erst nach zwei Zeilen (also mit einem Umbruch) mit "..." abzukürzen. Durch das whitespace: no-wrap habe ich ja leider immer nur eine Zeile.

Ich habe ein Sample erstellt, falls sich jemand mal versuchen möchte:

http://jsfiddle.net/yz6o3q8o/1/
 
Meines Wissens ist die Kombination von Zeilenumbruch white-space und Textkürzung text-overflow:ellipsis nicht (sauber) möglich. Das Kürzen gilt dann potenziell für jede Zeile.

1. http://jsfiddle.net/spicelab/dLrsqtvg/
Textfluß enthält im Editor einen Zeilenumbruch, white-space: pre ist gesetzt, um diesen zu interpretieren, und beide Zeilen werden gekürzt.

2. http://jsfiddle.net/spicelab/rtfku440/
white-space: normal erzeugt automatisch Zeilenumbrüche im Textfluß, offensichtlich wird hier keine Zeile gekürzt.

3. http://jsfiddle.net/spicelab/ny6ev47n/
Wird jedoch die Breite unglücklich verringert, betrifft die Textkürzung mehrere Zeilen.
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hier mal ein Versuch einer Alternative.
Code: 
<!DOCTYPE html>
<html lang="de"><head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
box-sizing:border-box;
}

button {
position:relative;
background:#eee;
width: 10%;
height:4em;
margin: 15px 25px;
line-height:2em; 
overflow:hidden;
}


button h3 {
  font-weight:normal;
}

button:after {
content:"...";
position:absolute;
right:0;
bottom:0px;
background:#eee;
height:1.6em;
}

button:hover {
height:auto;
}

button:hover:after {
content:"";
}
</style>
</head>
<body>
<button>
  <h3>Überschrift welche sehr lang sein kann</h3>  
</button>
</body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück