文字超出三行省略…显示全文「建议收藏」

文字超出三行省略…显示全文「建议收藏」1、在开发过程中,我们经常会用到这种超出三行显示…的要求,使用css属性是可以的,但是需要考虑兼容性问题实现单行文本的溢出显示省略号,我们应该都知道用text-overflow:ellipsis

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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('<p class="' + name+ '">' + text + ' ></p>');

    };    

  //lineHeight * num 是几行的高度,只要 实际的高度超过了设定的这个高度,就可以认为是超出了 num 行 

  }

  

 

以上有什么问题欢迎指出,蟹蟹!

 

菜菜叨逼叨

在本次需求中,也算是一个小学习吧,本来是想通过判断文字的字数来控制“查看全文”的展示与否,这种方法实现太过复杂,需要考虑不同屏幕的尺寸,文字中的特殊字符,包括可能存在的<br/>;跟产品的谈判又失败了,在设计上一点小的调整,可以降低开发的时间与难度,但是需求方一再不肯退步,手动狗头。如果在时间充足的条件下,可以考虑实现难点,如果时间紧迫,建议还是先找一种易实现的设计形式;不然只能两败俱伤啊~~~~~~~~~~~~~

 

 

 

转载请注明出处,虽然我是一只小菜鸡~

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167764.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 计算机vb语言程序设计_vb语言程序设计基础

    计算机vb语言程序设计_vb语言程序设计基础VisualBasic程序设计教程:计算机类语音编辑锁定讨论上传视频《VisualBasic程序设计教程:计算机类》是中国科学技术出版社出版的图书,作者是王东、刘福来。中文名VisualBasic程序设计教程:计算机类出版社中国科学技术出版社定价39.20作者王东刘福来ISBN9787504646798VisualBasic程序设计教程:计算机类内容简介编辑语音《全国高等…

  • 如何获取uuid_uuid是怎么生成的

    如何获取uuid_uuid是怎么生成的item.id=UUID.randomUUID().toString();

  • java面向对象三大特征及五大原则

    java面向对象三大特征及五大原则java面向对象一、java面向对象的三大特征1、封装(Encapsulation)封转是指属性私有化根据需要提供setter和getter方法来访问属性隐藏具体属性和实现细节,仅对外开放接口控制程序中属性的访问级别目的:增强数据安全性,不能让其他用户随意访问和修改数据,简化编程,使用者不必在意具体实现细节,而只是通过外部接口即可访问类的成员2、继承(Extend)继承是指将…

  • JSONObject转换为Map<String, String>对象「建议收藏」

    JSONObject转换为Map<String, String>对象「建议收藏」方法一JSONObjectobj=newJSONObject();{obj.put(“key1″,”value1”);obj.put(“key2″,”value2”);obj.put(“key3″,”value3”);}Map<String,String>params=JSONObject.parseObject(obj.toJSONString(),newTypeReference<Map<String,String>>.

  • 京东静态网页设计案例(1)

    京东静态网页设计案例(1)一、准备步骤以京东网页为设计案例,使用HTML和CSS进行设计,首先要在头部&lt;head&gt;文件中加入&lt;link&gt;对CSS文件里加入的两个CSS代码文件进行链接,一个是设置格式的代码,另一个是下载的图标库代码。示例代码如下:&lt;linkrel="stylesheet"href="./css/index.css"/&gt;&lt;linkrel="s…

  • nginx 日志管理「建议收藏」

    nginx 日志管理「建议收藏」打开nginx.conf配置文件我们观察nginx的server段,可以看到如下类似信息#access_loglogs/host.access.logmain;这说明该server,它的访问日志的文件是logs/host.access.log,使用的格式”main”格式.除了main格式,你可以自定义其他格式.main格式是什么?log_form…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号