这是我的 css 片段
.test{
width:150px;
height:60px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
它的作用是..
the quick brown fo...
我想要的是
the quick brown fox
jumps over the lazy
dog. the quick br...
有没有办法只用 CSS 来做到这一点？或者我需要为此使用 javascript 吗？如果需要javascript，有人可以教我怎么做吗？谢谢！
UPDATE
我尝试删除white-space: nowrap;并添加了overflow-y: hidden;它给了我 3 行布局，但没有省略号
.test{
width:150px;
height:60px;
overflow-y: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
你可以使用dotdotdot plugin http://dotdotdot.frebsite.nl/， 这对我来说可以。
纯CSS可以在某些浏览器中工作，但它有很多限制。假设你想要...在行的末尾3。
.test{
display: -webkit-box;
height: 60px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
