Text innerhalb der div müssen geteilt werden und ... zeigen, wenn der Text lang ist

Question

Ich habe eine Anforderung, in der ich den Text innerhalb der div zeigen muss. Es gibt nur wenige Zustand wie, wenn der Text zu lang ist, ich brauche den Text zu teilen und zeigen es in die zweite Zeile

e.g: 
Input: 
Hello Every Body this is long text 

Output: 
Hello Every Body 
This is... 

ich versucht habe, die Lösung von uns die unten CSS zu implementieren,

.div{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: 2; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    line-height: 10px; 
    height: 20px; 
    font-size:13px; 
    text-align: left; 
    } 

Aber das Problem ist, wenn der erste Text selbst zu lange wie ist:

Helooooooooooooooooooo ist dieser Text

Das Ergebnis ist comming nicht korrekt

Answer 1

word-break Eigenschaft Versuchen,

word-break: break-all; 

Answer 2

MitAuslassungs

.overflow { 
 
    width: 120px; 
 
    height:30px; 
 
    outline: 1px solid red; 
 
    margin: 0 0 2em 0; 
 
    /** 
 
    * Required properties to achieve text-overflow 
 
    */ 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
.ellipsis { 
 
    text-overflow: ellipsis; 
 
}

<div class="overflow ellipsis">This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</div>

Answer 3

Siehe fiddle

HTML

<div class="div"> 
Helooooooooooooooooooo this is text 
</div> 

CSS

.div{ 
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-line-clamp: 2; 
display: -webkit-box; 
-webkit-box-orient: vertical; 
line-height: 10px; 
height: 20px; 
font-size:13px; 
text-align: left; 
word-break: break-all; 
width:50px; 
background:#ccc; 
}