vue 超出三行隐藏_文字超出三行省略...显示全文
1、在开发过程中,我们经常会用到这种超出三行显示...的要求,使用css属性是可以的,但是需要考虑兼容性问题
实现单行文本的溢出显示省略号,我们应该都知道用text-overflow:ellipsis属性,同时注意加width来兼容部分浏览器;
.textOVerFlow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
实现三行在此基础上扩展:
.textOVerThree {
display:-webkit-box;
overflow: hidden;
white-space: normal !important;
text-overflow: ellipsis;
word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical
}
因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
2、此处延伸 ,超出三行显示展示全文,如果使用以上属性我们可以发现,实际上dom里面的文字没有改变,只是视觉上有...,实现超出三行显示全文,分为两步:
(1)、是否满足三行
(2)、是否出现了省略号... 或者说是否超过了三行
那麽对应的解决方案:
(1)行数我们可以通过 使用 line-height*num 与 dom的高度进行比较,但是无法判读是否三行全部占满,
(2)因为上面属性是实际文本内容并没有改变,所以说,我们可以获取到实际dom的高度,scrollHeight,与 我们需要的高度进行比较即可;
setCheckAll('.p_14', 3, '查看全文', 'text_blue');
/*设置必须有line-height 超过多少行显示文字查看全文*/
function setCheckAll(select, num, text, name) { //num 代表行数 text为添加显示的文字,
var height = $(select).height(),
realityHeight = $(select).get(0).scrollHeight;
lineHeight = $(select).css('line-height');
lineHeight = lineHeight.split('px')[0];
if(height + 1 >= lineHeight * num && realityHeight >= lineHeight * num) {
$(select).after('
' + text + ' >
');
};
//lineHeight * num 是几行的高度,只要 实际的高度超过了设定的这个高度,就可以认为是超出了 num 行
}
以上有什么问题欢迎指出,蟹蟹!
菜菜叨逼叨
在本次需求中,也算是一个小学习吧,本来是想通过判断文字的字数来控制“查看全文”的展示与否,这种方法实现太过复杂,需要考虑不同屏幕的尺寸,文字中的特殊字符,包括可能存在的
;跟产品的谈判又失败了,在设计上一点小的调整,可以降低开发的时间与难度,但是需求方一再不肯退步,手动狗头。如果在时间充足的条件下,可以考虑实现难点,如果时间紧迫,建议还是先找一种易实现的设计形式;不然只能两败俱伤啊~~~~~~~~~~~~~
转载请注明出处,虽然我是一只小菜鸡~
vue 超出三行隐藏_文字超出三行省略...显示全文相关推荐
- div超出不换行_文字超出显示点点点之ellipsis 设置
一般情况下一行文字在一定区域显示的话如果不限定高度,那么在内容超过的宽度的话就会换行显示,为了页面的美观,目前的通用做法就是在最后显示-,然后鼠标悬浮显示完整内容,具体设置如下: height: 40 ...
- 微信小程序页面文字超出一行隐藏,文字超出两行隐藏。
页面文字超出一行隐藏,如图所示: wxml <view class="listcbsTitle" >卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签</v ...
- CSS超出两行隐藏,但第三行文字溢出
超出隐藏代码: /*文字超出两行省略*/ .two-row-hide {white-space: normal;text-overflow: -o-ellipsis-lastline;overflow ...
- html超出部分显示隐藏,CSS文字超出部分隐藏并显示省略号
下面是编程之家 jb51.cc 通过网络收集整理的代码片段.编程之家小编现在分享给大家,也给大家做个参考. 网站前端开发中 web 网页中文字超出了需要隐藏,并显示省略号这个在工作中很多时候都要用到, ...
- css 多行文字超出部分省略号 一行文字超出部分省略号
1. <!-- 多行文字超出宽度部分省略号: 显示文字行数 隐藏多余的 文本多余显示省略号text-overflow:ellipsis)--> html: <div class=& ...
- php 文字超出画布,input实现文字超出省略号(代码示例)
本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. input实现文字省略号功能 普通元素实现文字超出宽度自动变成省 ...
- php 超出省略号,input实现文字超出省略号(代码示例)
本篇文章给大家带来的内容是关于input实现文字超出省略号(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. input实现文字省略号功能 普通元素实现文字超出宽度自动变成省 ...
- css实现文字过长省略显示
.simpleName {width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }<div clas ...
- html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
最新文章
- 数据驱动的云托管服务最佳范式
- c 高级函数的简单用法
- 10.Java设计模式 工厂模式,单例模式
- 数据清洗的基本流程_数据分析小白学习之路(三)——Excel多练熟能生巧
- LIBGDX游戏引擎平台介绍与搭建
- 本能富可敌国,最后却选择拯救世界!Bram的Vim和乌干达儿童
- 解决 idea 中 jsp 修改后页面不生效
- solaris php,针对 Solaris 的安装提示
- 信息学奥赛一本通(1220:单词接龙)
- 16 MM配置-BP业务伙伴-定义屏幕格式的账户组(供应商)
- jQuery 源码解析笔记(一)
- GNU C getopt()、getopt_long() 与 getopt_long_only() 获取命令行参数
- 【转】计算机键盘功能键作用
- 嘻哈 软件技术知识与项目管理知识
- Algorithm:数学建模大赛(CUMCM/NPMCM)之CUMCM之2006B之2006之B题《艾滋病疗法的评价及疗效的预测》
- 卡尔曼滤波算法在FPGA中实现
- boost::bind 详解
- 企业网站常见误区-金瑞帆高端建站
- isis和ospf比较
- android 触摸屏干扰,如何解决电容触摸屏的抗干扰问题?