CSSは文字列の最後に "vertical"ドットを追加します

Question

文字列の最後に3つのドットを追加して、親の高さに収まらない場合は、省略記号を使用しようとしましたが、幅は高さではなく固定された部分です。改行がないとき、改行は、この問題の重要な一部であり、それらを削除することはできません:(。

#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>

CSSが十分でない場合は、JavaScriptを使用してソリューションを提案することができますかあなたはjQueryのを好む場合

Answer 1

の1- Webkitのラインclambはあなたが悪いはい！ブラウザのサポートを助けることができる

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

あなたは、複数行のテキストを持つ楕円の効果を有することwan't 0 あなた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 - もう一つのピュアCSSのソリューション

<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/