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

全栈程序员站长

发布于 2022-09-20 10:22:22

1.9K0

发布于 2022-09-20 10:22:22

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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/>；跟产品的谈判又失败了，在设计上一点小的调整，可以降低开发的时间与难度，但是需求方一再不肯退步，手动狗头。如果在时间充足的条件下，可以考虑实现难点，如果时间紧迫，建议还是先找一种易实现的设计形式；不然只能两败俱伤啊~~~~~~~~~~~~~

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/167764.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https