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/