# text-overflow mit 2 Zeilen



## MichaA (21. April 2015)

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/


----------



## SpiceLab (21. April 2015)

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]​


----------



## djheke (23. April 2015)

Hier mal ein Versuch einer Alternative.

```
<!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>
```


----------



## MichaA (23. April 2015)

Danke für die Antworten. Ich habe es mal vorläufig mal so gelöst:

In Webkit Browsern nutze ich Line-Clamp und in anderen Browsern zeige ich einen Linear-Gradient an, um kenntlich zu machen, dass hier ein Text geschnitten wird.

http://jsfiddle.net/yz6o3q8o/10/


----------

