javascript - Wie zeige ich Text in einer Zeile an und ersetze ihn durch ..., wenn er die Anzahl der Wörter überschreitet?

Question

Wie im Titel ist die Breite festgelegt. Wenn sie die Anzahl der Wörter überschreitet, verwenden Sie ...

Answer 1

overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

overflow:hidden:超出隐藏
white-space:nowrap:强制不换行
text-overflow:ellipsis:超出省略号代替;

传送门，去看看

Answer 2

固定做法，需要以下四个条件：
1.宽度固定
2.overflow:hidden
3.white-space:nowrap
4.text-overflow:ellipsis

Answer 3

 display: -webkit-box;
    box-orient: vertical;
    line-clamp: 3; // 可控制几行后有 ... 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; // 兼容写法
    overflow: hidden;
    white-space:normal;

Answer 4

首先第一点，需要给那一行一个固定的宽度，即使不给固定宽度，也需要通过margin来限制这行，说白了，就是让这行有个固定的宽度。。。
其他的代码如下

如果是一个p标签
p{
    width:100px;//固定宽度
    overflow:hidden;//超出隐藏
    white-space:nowrap;//不换行
    text-overflow:ellipsis;//省略号
}

Answer 5

/a/11...
两种实现方式，固定宽度，超出部分显示...，鼠标悬浮现实省略内容

Answer 6

// line-clamp、line-height和height直接控制多行
.two-line {
    color: #333;
    line-height: 18px;
    height: 36px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }

Answer 7

有固定宽度，使用overflow:hidden;text-overflow:ellipsis;white-space:nowrap;