解决一行多余文字隐藏拿...代替的问题

最新推荐文章于 2022-05-17 16:32:18 发布

weixin_30654583

最新推荐文章于 2022-05-17 16:32:18 发布

阅读量176

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/fuzitu/p/7289766.html

版权

　　这是入行这么久来第一次写博文，所以在解决问题之前把开博客的原因也写在这儿，在项目开发中遇到问题-->依靠经验，进行思考造轮子，网上各种查阅相关问题-->终于把问题解决了，但是有时候项目的时间紧迫，在遇到类似的问题，只是有大概的印象，有的不能及时解决，所以决定在此做个记录，好记性不如烂笔头，同样好记性不如破笔记，整理总结一下毕竟印象会深刻很多。

　　很多前端认为前端的技术更新太快，跟不上时代的步伐怎么好意思说自己是专业的前端工程师，古语云：“三天不学习就要落后”，古语又云：“落后就要挨打”，不想总是被打的，所以在学习的同时也可以通过博文来记录自己每天的学习成果来督促自己进步，每天进步一点点，总是会越来越专业，工作也就越来越顺手，少了不必要的加班，多了每个月的薪资，（不敢往下想了^_^），生活真是越来越美好。

　　再此，程序员都是很有开源精神的，希望一起探讨来提高技术解决问题，我也希望我在项目中碰到的问题能帮助你解决类似的问题，好了不多扯了，开始今天的问题。

需求：一行文字超出的部分隐藏并且加以...代替；

　　这个需求初看很简单，可以用CSS和JS两种方法解决：

在不处理的情况下，上代码

<style>
    p{
        width: 50%;
        background-color: skyblue;
    }
</style>
<body>
    <p>有时候，我多么希望能有一双睿智的眼睛能够看穿我，能够明白了解我的一切，包括所有的斑斓和荒芜。那双眼眸能够穿透我的最为本质的灵魂，直抵我心灵深处那个真实的自己，她的话语能解决我所有的迷惑，或是对我的所作所为能有一针见血的评价。</p>
</body>

上图

　　1.css解决：

上代码

<style>
    p{
        width: 50%;
        background-color: skyblue;
        /*下面是添加内容*/
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

上图

　　2.js解决（感觉能用css解决的就尽量别麻烦js了）

上代码

<script>
    window.onload=function(){
        var p=document.getElementById('content');
        console.log(p.innerText.length);
        p.innerText=p.innerText.length>40?p.innerText.substr(0,40).concat('...'):p.innerText;
    }
</script>

上图

（缺点就是截取长度得试着来，因为长度不同）

需求增加：你给我隐藏了，不可能不让我看详细情况吧？？-->所以点下在显示详情

解决：

这次就得JS了：

1.如果隐藏是通过css添加的那么通过以下代码可以实现，上代码：

p.οnclick=function(){
            p.style.textOverflow='clip';
            p.style.whiteSpace='normal';
        }

2.如果是通过js 的substr()截取的那么截取之前应该利用data属性把全部的文本存到当前的元素，上代码；

    p.dataset.content=p.innerText;
    p.innerText=p.innerText.length>40?   p.innerText.substr(0,40).concat('...'):p.innerText;
    p.onclick=function(){
    p.innerText=p.dataset.content;
    }

这样就把需求解决了，虽然需求简单，但是可以给我们提示，在遇到问题的同时是不是可以通过多种方法来解决。

转载于:https://www.cnblogs.com/fuzitu/p/7289766.html

weixin_30654583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决一行多余文字隐藏拿...代替的问题

　　这是入行这么久来第一次写博文，所以在解决问题之前把开博客的原因也写在这儿，在项目开发中遇到问题-->依靠经验，进行思考造轮子，网上各种查阅相关问题-->终于把问题解决了，但是有时候项目的时间紧迫，在遇到类似的问题，只是有大概的印象，有的不能及时解决，所以决定在此做个记录，好记性不如烂笔头，同样好记性不如破笔记，整理总结一下毕竟印象会深刻很多。　　很多前端认为前端的技术更新太快，...
复制链接

扫一扫