【CSS笔记】使文字在一行显示,超出部分用省略号显示
2016-02-11 14:56
567 查看
CSS代码:
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
说明:
text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出。
white-space:nowrap;强制文本在一行内显示。
overflow:hidden;溢出内容为隐藏。
必须三者同时用的时候才会实现溢出文本显示省略号
附:多行显示的方法:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置显示几行
-webkit-box-orient: vertical;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
说明:
text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出。
white-space:nowrap;强制文本在一行内显示。
overflow:hidden;溢出内容为隐藏。
必须三者同时用的时候才会实现溢出文本显示省略号
附:多行显示的方法:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置显示几行
-webkit-box-orient: vertical;
相关文章推荐
- css三列布局
- 网页布局CSS初始化代码
- 网页中Logo的样式代码
- 根据设备视口宽度来更换样式表
- 利用CSS3媒体查询实现更换样式表
- 了解HTML CSS布局(层叠样式表)
- 前端试题-什么是css sprite?优缺点?
- 利用JS生成博文目录及CSS定制博客
- [笔记][Web]利用JS生成博文目录及CSS定制博客
- 【CSS笔记】display:inline-block的使用
- mac下 静态文件css403无法显示
- HTML+CSS笔记 CSS笔记集合
- HTML+CSS笔记 CSS中级 一些小技巧
- HTML+CSS笔记 CSS中级 颜色&长度值
- HTML+CSS笔记 CSS中级 缩写入门
- HTML+CSS笔记 CSS进阶再续
- HTML+CSS笔记 CSS进阶续集
- HTML+CSS笔记 CSS进阶
- HTML+CSS笔记 CSS入门续集
- HTML+CSS笔记 CSS入门