2012-12-15 16 views
5

Also versuche ich word-break mit text-overflow zu kombinieren, die irgendwann funktioniert, aber nicht wie es sein soll.CSS-Word-Break kombiniert mit Text-Überlauf

Zum Beispiel habe ich diese einrichten Fiddle

CSS:

width: 200px; 
padding: 8px; 
border:1px solid blue; 
word-break: break-word; 
height: 100px; 
overflow: hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 

Zur Verdeutlichung einmal Text um Teile gebrochen wird Feld ausfüllen und am Ende des Textes soll es sein 3 Punkte. Derzeit gibt es nur eine einzige Zeile, wo es funktioniert.

+0

FWIW: Es gibt einen [Vorschlag und Diskussion] (http://lists.w3.org/Archives/Public/www-style/2012Jan/0627. html) in der Mailing-Liste [email protected] wie für die Verwendung von Text-Overflow für mehrzeilige Texte. –

Antwort

3

Soweit ich weiß, ist dies mit CSS nicht möglich.

Sie können nur height und overflow:hidden angeben. (Keine Ellipsen am Ende.)

Dies wird in der W3 spec for text-overflow angegeben.

Auslassungs
eine Auslassungszeichenfolge wird auf jeder Box Grenzen eingesetzt, wo ein Textüberlauf auftritt. Die Werte dieser Ellipsenstrings sind , die durch die Eigenschaft 'text-overflow-ellipsis' festgelegt werden. Die Einfügungen Ort an der Grenze der letzten vollständigen Glyphe Darstellung einer Textzeile nehmen
...
Mit anderen Worten wirkt der Text-Überlauf-Modus nur den Textinhalt eines Blockelementes die Teilnahme an eigener Inline-Flow.

Sie müssen JavaScript verwenden, um dies zu erreichen. Hier

ist ein Beispiel für eine jQuery-Plugin: http://pvdspek.github.com/jquery.autoellipsis/