CSS文字控制在二行 超出部分不显示
来源:互联网 发布:linux系统如何使用 编辑:程序博客网 时间:2024/05/01 19:56
首先三条属性。
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
这三条属性,只能显示一行,不能用在这里,那么如果显示多行呢?
CSS3解决了这个问题,解决方法如下:
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
最后的css样式如下:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
以上对火狐不支持~暂时没想到好的解决办法~
0 0
- CSS文字控制在二行 超出部分不显示
- CSS控制文字,超出部分显示省略号
- CSS控制文字,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- CSS控制文字只显示一行,超出部分显示省略号
- css控制文字 文本超出部分显示省略号
- CSS实现文字超出部分显示省略号
- css文字超出部分显示省略号
- 文字不换行,超出部分显示省略号
- CSS样式控制一行文字超出部分显示省略号 text-overflow:ellipsis
- css文字超出显示...
- css文字超出显示
- CSS限制文字只能显示一行,超出部分显示省略号
- Linux工程管理器make
- 爱情和心碎结伴而行
- hdu_1147 Pick-up sticks(线段相交)
- C++组合模式
- android-单击事件的响应方法
- CSS文字控制在二行 超出部分不显示
- Maven项目遇到OutOfMemoryError可以尝试的方法
- cuda编程入门示例2---CUDA environment initialization
- 衣带渐宽终不悔,为伊消得人憔悴--DbHelper增强版
- Android 混合开发之仿微信朋友圈
- 【数据结构】二叉树中任意两节点的最近公共祖先节点
- PHP 中的设计模式详解
- 初识JS
- 学生成绩管理系统java结业项目