首页  >  问答  >  正文

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

如题,宽度固定,超过字数用...代替

大家讲道理大家讲道理2733 天前907

全部回复(7)我来回复

  • 迷茫

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

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

    传送门,去看看

    回复
    0
  • 为情所困

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

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

    回复
    0
  • 高洛峰

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

    雷雷

    回复
    0
  • 阿神

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

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

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

    回复
    0
  • 仅有的幸福

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

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

    回复
    0
  • 巴扎黑

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

    雷雷

    回复
    0
  • 我想大声告诉你

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

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

    回复
    0
  • 取消回复