javascript - How to display text in one line and replace it with... if it exceeds the number of words?

Question

As in the title, the width is fixed, if the number of words exceeds the number, use... instead

Answer 1

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

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

Portal, go check it out

Answer 2

Fixed approach requires the following four conditions:
1. Fixed width
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

First of all, the first point is that the line needs to be given a fixed width. Even if the width is not given, the line needs to be limited by margin. To put it bluntly, it is to give the line a fixed width. . .
Other codes are as follows

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

Answer 5

/a/11...
Two implementation methods, fixed width, excess display..., mouse hover to omit content

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

With fixed width, use overflow:hidden;text-overflow:ellipsis;white-space:nowrap;