CSS: Können Sie Überlauf verhindern: versteckt von der letzten Zeile des Textes abgeschnitten?

Question

Bei der Verwendung von CSS-Überlauf: versteckt, habe ich oft festgestellt, dass die letzte Textzeile teilweise abgeschnitten wird. Gibt es eine Möglichkeit dies zu verhindern, so dass keine Teillinien auftauchen. Fast wie ein vertikaler Wortumbruch.

Answer 1

Rob ist korrekt. Ich machte ein div, das eine maximale Höhe von 11em hatte und die letzte Zeile des Überlauftextes war nur halb da. white-space: nowrap eliminiert nur die letzte Zeile alle zusammen.

versuchte ich

white-space: nowrap; 

und Gaby auch richtig ist, daß diese Probleme zu verursachen.

Das Beste, was ich herauskommen, war mit der line-height und div Höhe Geige, bis die wenigstenen Linien

-off geschnitten wurden

Answer 2

Diese Lösung für mich gearbeitet: https://stackoverflow.com/a/17413577/2540428 im Wesentlichen einen Wrapper div mit der entsprechenden Polsterung aus und legen Sie den Inhalt in das Haupt-Div, wo Sie seine Höhe bearbeiten und den Überlauf ausblenden. Siehe Link für weitere Details.

Answer 3

Sie Wrapper div und mehrspaltigen CSS verwenden können:

.wrapper { 
    -webkit-column-width: 150px; //You can't use 100% 
    column-width: 150px; 
    height: 100%; 
} 

Lösung Beispiel:http://jsfiddle.net/4Fpq2/9/

-Update 2017-09-21

In Firefox noch diese Lösung funktioniert aber in Chrome gebrochen. Vor kurzem hat Chrome Break-Spalte von kleinen Teilen gestartet, auch brechen Pause Inhalt, wenn Sie Höhe einstellen. In diesem http://jsfiddle.net/4Fpq2/446/ Beispiel ändere ich Höhe auf maximale Höhe und zeigen seltsames Verhalten von Chrome. Wenn Sie Ideen haben, schreiben Sie bitte in Kommentare.

Answer 4

Es gibt zwei css3-Eigenschaften. 1) Wort-Bruch & 2) Wort-arap

Vergessen Sie nicht, das sind neue Eigenschaft, die css3 ist. So dass ältere Browser solche Eigenschaften nicht unterstützen.

.class-name {word-break: break-all;} 
.class-name {word-wrap: break-word;} 

Answer 5

Sobald Sie verstehen, wie die column-width Arbeit, @ stalkerg Antwort sehr viel Sinn macht.

Die column-width teilt den Inhalt in Spalten, damit die letzte Zeile des Textes nicht passt, wird in die nächste Spalte verschoben. Jetzt besteht der Trick darin, die Spaltenbreite so groß wie den Container zu machen. Der Container hat einen Überlauf: versteckt, so dass die 2. Spalte nicht anzeigen soll.

.box { 
    width: 200px; 
} 
.container { 
    -webkit-column-width: 200vw; 
    -moz-column-width: 200vw; 
    column-width:   200vw; 
    height:    100%; 
} 

Answer 6

nur Spaltenbreite Attribut hinzufügen und Breite des Containers einstellen, es wird funktionieren.

Answer 7

die für mich gearbeitet:

.wrapper_container{ 
    width: 300px; 
    height: 200px; 
    overflow: hidden; 
} 

.wrapper{ 
    -webkit-column-width: 300px; 
    column-width: 300px; 
    height: 100%; 
}