css单行截断和多行截断的用法-创新互联
这篇文章主要介绍“css单行截断和多行截断的用法”,在日常操作中,相信很多人在css单行截断和多行截断的用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css单行截断和多行截断的用法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司拥有10余年成都网站建设工作经验,为各大企业提供网站设计、成都网站制作服务,对于网页设计、PC网站建设(电脑版网站建设)、重庆APP软件开发、wap网站建设(手机版网站建设)、程序开发、网站优化(SEO优化)、微网站、域名注册等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等网站化运作于一体,具备承接各种规模类型的网站建设项目的能力。单行截断:
span { display: inline-block; // 如果不是block元素,还需要设置这个。 width: 150px; // 超出的宽度 overflow: hidden; // 超出隐藏 text-overflow: ellipsis; //超出用省略号 white-space: nowrap; // 不换行 }
多行截断:
多行截断有好几种方法,
1: 最简单,使用-webkit-line-clamp , 当然了,只能用在webkit内核浏览器, 并且不支持自定义点击展开的样式。
p { width: 400px; // 超过这个宽度 text-overflow: ellipsis; // 使用省略号 display: -webkit-box; // 必须使用这个 overflow: hidden;// 必须使用,超出隐藏 -webkit-line-clamp: 4; // 必需设置, -webkit-box-orient: vertical; // 设置里面元素排列顺序 text-align: justify; // 里面问题排列方式 }
2: 也是面试中回答的方式,使用伪类。。。这个由于要使用js判断是否超出,因此适用于,你已经知道是大段文字的情景。 但是面试官不是很满意这个方式,呜呜呜
p{ position: relative; height: 36px; // 面试官说这个是定死的,所以不灵活。。。感觉很奇怪啊,不是死的话,怎么知道什么情况溢出? overflow: hidden; line-height: 18px; } p::after{ // 这个是一直有省略号,所以需要js判断是否超出,如果超出的话,就加一个class。 content: '...'; position: absolute; bottom:0; right: 0; }
3:使用float, 挺复杂的,不喜欢float......, 使用float时候,省略号是一个dom节点,因此可以添加事情和样式, 自定义程度高!
腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。...更多
其中standard是一个标准,超过它的高度时候,就会显示省略号,container是个容器,超过他的大高度,就hidden。 三个div都float:right,其中content的margin-left:-standard的宽度,把standard给让出来,让standard出现在左侧。
.container{ max-height: 54px; // 大高度 overflow: hidden; // 超出隐藏 line-height: 18px; // 方便计算几行。。 font-size:12px; } .container div{ // 三个元素都设置float float: right; } .content{ margin-left: -50px; // 这是第一个元素,由于他宽度是100%,所以需要给standard位置。 width:100%; position:relative; background: hsla(229, 100%, 75%, 0.5) } .standard{ width: 50px; //宽度随意, 需要与上面margin-left一样 height: 54px; // 超出这个高度会出现more元素 position:relative; color:transparent; background: hsla(334, 100%, 75%, 0.5); } .more{ width:50px; // 这个元素可自定义,宽度 height:18px; position: relative; left: 100%; // 确定位置, transform: translate(-100%,-100%);// 确定位置 background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff); // 这是使用渐变,因为more元素会覆盖住content元素。 }
总结: 可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。
到此,关于“css单行截断和多行截断的用法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联-成都网站建设公司网站,小编会继续努力为大家带来更多实用的文章!
分享题目:css单行截断和多行截断的用法-创新互联
新闻来源:http://myzitong.com/article/djpjpo.html