欢迎来到懒人图库!
  • 首 页
  • 懒人论坛
  • CSS强制不换行超过div部分长度采用省略号

    2017-02-10 来源/作者:懒人图库 分类:文字特效 «»
    运行代码保存代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

    场景描述:在条目列表中经常遇到,要求固定高度的一行文本,随着窗口页面的收缩或分辨率的调整,对该文本进行隐藏展示,超过部分采用省略号“...”来表示。

    DIV基本原理:三行CSS代码

    1、white-space:nowrap;white-space属性表示设置如何处理元素内的空白,nowrap表示文本不会换行,文本会在在同一行上继续,直到遇到标签为止。

    2、overflow:hidden;overflow属性表示规定当内容溢出元素框时发生的事情hidden表示内容会被修剪,并且其余内容是不可见的。

    3、text-overflow: ellipsis;text-overflow属性表示规定当文本溢出包含元素时发生的事情ellipsis表示显示省略符号来代表被修剪的文本。

    标签:文字特效