在多行跨度中添加三个点
在多行跨度中添加三个点
提问于 2012-08-04 03:49:51
我找到了this question here on SO，解决方案非常简单：
jsfiddle：http://jsfiddle.net/Y5vpb/
html：
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen look</span>css：
span{
display:inline-block;
width:180px;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}它的工作方式和预期一样，它打印出来：Lorem Ipsum is simply du...
现在，我想做同样的事情，但总是失败，在下面的例子中创建：
jsfiddle：http://jsfiddle.net/9HRQq/
html：
<div class="textContainer">
<img src="#" class="image" alt="the_image">
<span class="text">"The quick brown fox jumps over the lazy dog" is an english-language pangram, that is, a phrase that contains all of the letters of the English alphabet. It has been used to test typewriters and computer keyboards, and in other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.</span>
</div>css：
.textContainer{
width: 430px;
float: left;
margin-top: 10px;
border: 1px solid black;
}
.text {
font-size: 24px;
line-height: 24px;
font-weight: bold;
color: #047F04;
display: block;
white-space: normal;
overflow: hidden !important;
text-overflow: ellipsis;
height: 99px;
}
.image {
float: right;
position: absolute;
top: 85px;
right: 10px;
width: 108px;
height: 42px;
}你能告诉我如何在我的例子中把...放在字符串的末尾吗？
回答 2
Stack Overflow用户
发布于 2022-01-02 15:28:06
这在没有js或jquery的情况下是可能的。只是纯css而已。
与vijay的答案类似，但要添加，您需要为-webkit-box-orient: vertical;设置一个额外的字段
span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* limit to 2 lines */
}Stack Overflow用户
发布于 2012-08-04 03:55:12
将width: 200px;和white-space: nowrap;添加到您的.text css块。如果没有设置宽度，文本只是扩展和填充。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11802361
复制相关文章
相似问题