javascript - 怎么实现文字在一行内显示，超过字数用...代替？

迷茫2017-05-19 10:15:23

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

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

传送门，去看看

为情所困2017-05-19 10:15:23

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

高洛峰2017-05-19 10:15:23

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

阿神2017-05-19 10:15:23

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

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

仅有的幸福2017-05-19 10:15:23

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

巴扎黑2017-05-19 10:15:23

// 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;
  }

我想大声告诉你2017-05-19 10:15:23

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