CSS在一个字符串的末尾添加“垂直”点
问题描述:
我想在不能放入父母身高的字符串的末尾添加3个点,我试过使用省略号但它只是在宽度是固定部分而不是高度。当有不换行符,换行符是这个问题的一个重要组成部分,它们不能被删除:(。CSS在一个字符串的末尾添加“垂直”点
#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
答
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;
}
您wan't拥有多行文本椭圆效果,是这样吗? – Raimonds
不,只是在文本的末尾 –
我会考虑将字符串定时到一定的长度,并最后用3个点附加它,而不是依靠css,最后还会有很多可比较性问题。或者有另一个“简介文本”的数据源,但根据我的经验不要尝试使用它,只需将3个点附加到修剪后的字符串 – Raimonds