首页
网站首页
公司简介
资讯中心
推荐内容
返回顶部
CSS实现文本溢出的部分用省略号代替的方法,耗时问题
发布时间:2020-01-31 09:52
浏览次数:

我们通常在设计网页的时候,由于相关的需求需要一行定宽,然而有时候文字的展现过长就会溢出。今天,就单行和多行两种情况来说明一下溢出的文字用省略号代替。一、单行溢出1,单行溢出,超出部分显示...或者截取。前提必须有宽度。CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;实现代码:width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号:二、多行溢出{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}实现方法:display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;效果如图:适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;说明:1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:2.display:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。3.-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。另外,除了上述适用于WebKit浏览器及移动端还可用下面这种现实多行溢出:实现方法:p{position:relative;line-height:20px;max-height:40px;overflow:hidden;}p::after{content:"...";position:absolute;bottombottom:0;rightright:0;padding-left:40px;background:-webkit-linear-gradient(left,transparent,#fff55%);background:-o-linear-gradient(rightright,transparent,#fff55%);background:-moz-linear-gradient(rightright,transparent,#fff55%);background:linear-gradient(torightright,transparent,#fff55%);}适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。说明:1.将height设置为line-height的整数倍,防止超出的文字露出。2.给p::after添加渐变背景可避免文字只显示一半。3.由于ie6-7不显示content内容,所以要添加标签兼容ie6-7;兼容ie8需要将::after替换成:after。

新手入门,做了一个视觉识别的程序,然后发现分辨率有问题,调用的是笔记本的内置摄像头,然后分辨率比自己设置的160*120大的多,结果就是输出的一个窗口上有整个的图像,另一个窗口上记录的识别范围只有整个图像的一个小角。另外整个的算法貌似也太繁琐了,用笔记本运行起来都一卡一卡的,处理速度跟不上,求大神指点一下有没有什么更好的算法?或者能不能把摄像头传来的图像进行压缩,变成小图再进行处理?会不会快一些?以下代码:

图片 1

小弟想通过cuda加速opencv代码,可是单单将图像传到GPU这一句就耗时大概800ms。。。。请问各路大神,你们是如何解决GpuMat.upload(image)耗时问题的?

友情链接: 网站地图
Copyright © 2015-2019 http://www.nflfreepicks.net. 新葡萄京娱乐场网址有限公司 版权所有