CSS hinzufügen "vertikale" Punkte am Ende einer Zeichenfolge

Question

Ich möchte 3 Punkte am Ende einer Zeichenfolge hinzufügen, die nicht in der Höhe passen kann, die Eltern hat, habe ich versucht, Ellipse verwenden, aber es funktioniert nur wenn Die Breite ist der feste Teil und nicht die Höhe. und wenn es nicht Zeilenumbrüche, Zeilenumbrüche sind ein wichtiger Teil dieses Problems, und sie können nicht entfernt werden :(.

#somediv{ 
 
    min-width: 100%; /*It's important to keep the width as 100%*/ 
 
    max-width: 100%; 
 
    min-height: 50px; 
 
    max-height: 50px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid #eeeeee; 
 
}

<div id="somediv"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet autem 
 
    <br> 
 
    consectetur corporis eaque laboriosam praesentium temporibus? Accusamus   <br> 
 
    consequatur deserunt, dolorum eaque facere inventore labore mollitia possimus, <br> 
 
    quia quo, veniam. 
 
    <br> 
 
    br tags are some important part of the example 
 
    <br> 
 
    As you can see the text is trimmed, 
 
    Without the br tags the text would be in a single line and dot's would be displayed 
 
</div>

Wenn CSS nicht genug ist, können Sie vorschlagen Lösungen mit Hilfe von Javascript oder wenn Sie jQuery bevorzugen

Answer 1

1- Webkit Linie Clamb kann Ihnen helfen, Ja! Browser-Unterstützung schlecht

overflow: hidden; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical; 

Für Ihre someDiv

#somediv { 
    min-width: 100%; 
    max-width: 100%; 
    min-height: 50px; 
    max-height: 50px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    border: 1px solid #eeeeee; 
} 

2- Eine weitere CSS-Lösung

<div class="block-with-text"> 
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. 
</div> 


.block-with-text { 
    overflow: hidden; 
    position: relative; 
    line-height: 1.2em; 
    max-height: 3.6em; 
    text-align: justify; 
    margin-right: -1em; 
    padding-right: 1em; 
    width:80%; 
} 

.block-with-text:before { 
    content: '...'; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

.block-with-text:after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1em; 
    height: 1em; 
    margin-top: 0.2em; 
    background: white; 
} 

https://jsfiddle.net/pz03jur2/