css之单行缩略..以及多行缩略

html单行缩略方法

.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}

html多行缩略(主要针对webkit内核)

.multiline {
    display: -webkit-box !important;
    overflow: hidden;

    text-overflow: ellipsis;
    word-break: break-all;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.oneline {
    white-space: nowrap; //强制文本在一行内输出
    overflow: hidden; //隐藏溢出部分
    text-overflow: ellipsis; //对溢出部分加上...
}
时间: 2024-11-06 14:40:30

css之单行缩略..以及多行缩略的相关文章

css 文本单行、多行超出省略

实现单行 .nowrap{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 实现多行: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 关于css实现单行.多行省略标记:http://www.cnblogs.com/moutudou/p/7077705.html

sql的基础语句-单行函数,dual,数字函数,日期函数,表连接,集合运算,分组报表,单行子查询,多行子查询

3. 单行函数 3.1 转换函数 select ascii('A'),chr(65) from dual; select to_char(1243123),1231451 from dual;靠左边的就是字符串,靠右边的就是数字 select to_char(123512a121) from dual;   --错误的写法,没有引号表示数字,但是数字里面包含了字母,不合法的输入值 select to_number('123141211') from dual; select to_number(

CSS中的块级元素与行级元素

最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底边距都是可以设置的. 3.元素的宽度如果不设置的话,默认为父元素的宽度. 常见的块级元素:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>

1.子查询知识体系,单行子查询,多行子查询

 1查询工资比scott高的员工信息 A 第一步:查询出scott这个员工的工资 select sal from emp where ename = 'SCOTT'; B 第二步:查询出工资比scott高的员工信息 select * fromemp where sal >3000; 总结: 子查询的本质:多个select语句的嵌套 2:子查询的知识体系搭建 A 合理的书写风格 B 子查询外面()不要忘记 C 子查询和主查询可以查询的是同一张表,也可以不是同一张表 只要子查询返回的结果,主查询

oracle[insert 时报错: 单行子查询返回多行]

-- 错误的写法 insert into t_b_partner_vehicle(id, partner_id, vehicle_id) (seq_t_b_partner_vehicle.nextval,121, (select id from t_b_car_info where org_id in(1441,1427))) -- Error 单行子查询返回多行 -- 正确的写法 insert into t_b_partner_vehicle(id, partner_id, vehicle_i

旅游攻略-北京三日游攻略(已实践)

游玩地点:北京市 游玩时间:2017年2月3日-2017年2月6日 临时接到朋友要来北京旅游的消息,为了接待朋友,一天时间做的游玩攻略,第一次做攻略,压力很大. 下面的内容是整合了游玩前做的旅游攻略和游玩后做的旅游总结,为了记录这次旅游,为了提高自己做计划的能力,也为了其他人能从中获得帮助信息而写的博文. 一.预备:2月3日 1.17:30 下班后吃饭 -> 买被套,枕头套,镜子,牛奶,零食,拖鞋,牙刷,毛巾,浴帽,手套(滑雪的时候需要,滑雪场卖30元一双手套)和大量矿泉水(3瓶/人/天)等等

CSS实现单行与多行文字省略(truncation)

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: 1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class=&q

CSS文本单行或者多行超出区域省略号(...)显示方法

单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢出时显示省略标记(...) 2.white-space: nowrap | normal | pre|pre-wrap|pre-line; normal :默认.空白会被浏览器忽略. pre:空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowwrap:文本不会换行,文本

scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出

1. scss @mixin rounded($param1,$param2) { #{$param1}:$param2; -webkit-#{$param1}: $param2; -moz-#{$param1}: $param2; -ms-#{$param1}: $param2; -o-#{$param1}:$param2; } 使用方法: @include rounded(transition,all 0.3s); 2.less .promise(@css, @args) { @{css}: