文字末尾转换省略号text-overflow: ellipsis;

//一行内文字末尾转换省略号由以下3个元素组成:

overflow: hidden;//文字溢出当前盒子的内容被隐藏掉

text-overflow: ellipsis;//由文字末尾没有被隐藏的一两个文字转换为省略号

white-space: nowrap;//强制当前的文字在一行内,无论多少文字只能在一行内显示

//width:50px;谨记宽度一定要小于文字的宽度,50px只是举个例子

//前提是盒子放不下文字,也就是说当前盒子小于文字的宽度


//多行文字末尾转换省略号由以下5个元素组成:

text-overflow:ellipsis;

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;//控制文字在哪行显示省略号

不兼容IE与火狐,只写-webkit-前缀就好

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一.标签内单行文字时 1.仅适用 text-overflow: ellipsis; 时,无法实现省略号效果 效果如...
    风月灯阅读 5,279评论 0 0
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,542评论 0 6
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,839评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,803评论 0 2
  • 初八,结束了春节返乡之旅的我们,重新开始了朝九晚五的工作生活。 是否也有很多父母,春节期间是奔赴到子女所在的城市,...
    鹿颐思林阅读 4,502评论 0 1