-webkit-line-clamp 实现限制文字显示多行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性:

display: -webkit-box;必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow,可以用来多行文本的情况下,用省略号“...”隐藏超出范围的文本 。

-webkit-line-clamp:<number>

number用于显示的行数

-webkit-box-orient 默认是水平的,当值设为vertical时为垂直排列

css {

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

}

时间: 2024-11-05 18:53:18

-webkit-line-clamp 实现限制文字显示多行,多余的用...的相关文章

css设置使文字显示2行多余的为省略号。。。

.title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隐藏超出的内容 **/ word-break: break-all; text-overflow: ellipsis; /** 多行 **/ display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-l

-webkit-line-clamp 实现限制文字显示多少行,多余的用...

-webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中. 限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性: display: -webkit-box; ,将对象作为弹性伸缩盒子模型显示 . -webkit-box-orient  ,设置或检索伸缩盒对象的子元素的排列方式 . text-overflow,可以用来多行文本的情况下,用省略号“...”

css让文字显示特定行数,多余的显示省略号

/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 显示的行数 **/ overflow: hidden; /** 隐藏超出的内容 **/ } 1,

j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt

Qt添加窗口背景图片、Label图片显示、、Label文字显示

一.添加窗口背景图片 重写MainWindow绘制事件 void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.drawPixmap(0,0,width(),height(),QPixmap("background.png")); qDebug()<<event; }记得在头文件中声明函数. 二.图片显示 QPixmap car("Car.png"

OSG的HUD抬头文字显示

原文:http://blog.csdn.net/tmljs1988/article/details/7562926 可以运行 1.       HUD流程图: 完整源代码如下: /*OSG中的HUD,文字总是显示在最前面*/ #include <osgDB/ReadFile> #include <osgViewer/Viewer> #include <osg/Geode> #include <osg/Depth> #include <osg/Camer

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

发布一个文字界面库 解放文字显示 几分钟使你的对话框OR视图文字呈现多彩效果

解放文字显示 几分钟使你的对话框OR视图文字呈现多彩效果 解放文字显示处理 不要再将宝贵时间浪费在文字显示处理上,几分钟使您的文字显示呈现多彩效果 示例 :在对话框CStatic控件上,显示一段文字信息: 代码: shuhuaDLL使用说明: 对话框程序中添加VIEW视图: 对话框上放一个文本控件CStatic IDC_STATIC ,用此控件承载VIEW视图. 第一步:在对话框头文件中听见DLL头文件 #include "shuhuaDll\Factory.h" //添加视图头文件

CSS实现div内文字显示两行,超出两行部分省略号显示

在搭建前台文章列表中,需要实现div内文字显示两行,超出的则省略号显示. 找了很多,都貌似只能一行显示.最后在百度知道找到答案. 答案转自百度知道,题主的自答. 用的是-webkit-私有属性.text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另有回