CSS在一個字符串的末尾添加「垂直」點

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; 

爲了您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/