So schneiden Sie einen Text in einem HTML-Code

Question

Ich möchte einen Text in einer HTML-Seite abschneiden.

style.css:

p { 
height: 30%; 
overflow: hidden; 
text-overflow: ellipsis; 
} 

index.html

<p> 
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</p> 

Ich möchte ein Ergebnis erhalten so:

hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
hhhhhhhhhhhhhhhhhhhhhhhhhh... 

Aber ich kann dieses Ergebnis nicht bekam die Verwendung von style.css unten erwähnt. Wie kann ich es beheben?

Answer 1

Die CSS-Regel word-wrap: break-word; wird sogar lange Wörter wie deins zwingen, am Ende des div zu brechen. Sie können auch die Breite des Divs begrenzen, um einen ähnlichen Effekt zu erzielen wie Sie es getan haben.

p { 
 
    height: 30%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    word-wrap: break-word; 
 
    width: 200px; 
 
}

<p> 
 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
 
</p>

Answer 2

Sie vielleicht suchen diese

p{ 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 3; 
 
    -webkit-box-orient: vertical; 
 
    max-width: 200px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    height:56px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>

Hinweis: seine funktioniert nur auf Webkit-Browsern

Answer 3

Hier ist, was es ist n normalerweise, wenn es erwartet wird, dass lange Wörter eingeführt werden, die Ihr Layout zerstören.

p { overflow-wrap: break-word } 

Dies führt dazu, dass die Linien zwischen zwei beliebigen Zeichen brechen. Sie können auch verwenden:

word-break: break-all 

... wenn Sie erwarten, dass Chinesisch, Japanisch und Koreanisch in das Feld eingefügt werden.