Wie schränkt Zeichenbegrenzung durch Linie oder # von Zeichen mit CSS ein?

Question

Gibt es eine CSS-Eigenschaft, die eine der folgenden Möglichkeiten bietet? Aber zuerst, lass mich das erklären.

Stellen Sie sich ein Mauerwerk vor, bei dem jedes Element Breite hat: 200px; und jeder wäre Höhe: 250px; (Dies ist nur ein Beispiel).

In jedem Element gibt es ein Thumbnail und einen Link, und oft wird dieser Link zu 2-3 Zeilen umgebrochen, und daher die Höhe jedes Elements unterschiedlich.

Gibt es eine Möglichkeit, eine maximale Anzahl an Zeichen innerhalb einer Klasse zu setzen oder nach einer bestimmten Anzahl von Zeilen den Zeilenumbruch abzubrechen? Und vielleicht fügen Sie sogar einen CSS-Effekt hinzu, um Inhalte einzufügen: "..."; vor dem Zeilenende, um zu zeigen, dass es abgeschnitten wurde?

Jede Hilfe wird geschätzt.

Vielen Dank.

Answer 1

Sie können text-overflow versuchen, aber es hat einige Einschränkungen, aber immer noch könnte Hotel Sie:

Example

<div id="container"> 
    This is some short content to demonstrate the css-property 
    text-overflow 
</div>​ 

#container{ 
    width:100px; 
    height:50px; 
    border:1px solid red; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}​ 

Answer 2

Keine Zeichen, aber Sie können die Breite eines Elements in Pixeln festlegen und die Eigenschaft text-overflow verwenden, die "..." hinzufügen soll.

Sie können auch die Anzahl der Zeilen begrenzen, indem Sie die Höhe eines Elements beispielsweise auf 30px setzen und die CSS-Eigenschaft line-height auf 15px setzen und overflow:hidden hinzufügen. Auf diese Weise haben Sie genau zwei Textzeilen.

.twoLines{ 
    height:30px; 
    line-height:15px; 
    overflow:hidden; 
}