css超出div用省略号的问题

Question

下面和css可以让超出div的文字用省略号代替，但是只能显示一行文字，可以显示2行文字后再省略吗？

.line1 {
  height: 200px;
  width:200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

Answer 1

CSS无法完成，你需要jquery插件，dotdotdot

Answer 2

搜搜-webkit-line-clamp这个属性，除了这个兼容性不好的属性，只有动js了

Answer 3

可以看一下
http://zhidao.baidu.com/quest...

也可以用伪元素after实现吧

Answer 4

.box {
     width: 400px;
     overflow: hidden;
     -webkit-line-clamp: 3; //行数
     -webkit-box-orient: vertical;
}

仅支持webkit浏览器，可用于移动端

Answer 5

-webkit-line-clamp

Answer 6

div {
    padding: 8px 12px;
    height: 72px;width: 512px;
    font-size: 24px;line-height: 36px;color: #fff;
    background: #ef6c00;
    overflow: hidden;
    position: relative;
}
div:after {
    width: 24px;height: 36px; /* 符合 font-size 和 line-height */
    background: inherit;
    display: block;
    position: absolute;bottom: 8px;right: 12px; /* right 值根据 padding 等因素慢慢试 */
    content: "…";
}

<div>蓝蓝的天空，清清的湖水。这是一些文字。这是一些文字。这是一些文字。这是一些文字。这是一些文字。</div>

https://jsfiddle.net/kz_dsf/z...

有个缺点是文字中最好别有多种文字。