控制文字超出多行显示隐藏，这一个简单易懂的函数就够了

最新推荐文章于 2022-03-17 00:39:45 发布

Emiya__Tan

最新推荐文章于 2022-03-17 00:39:45 发布

阅读量366

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Emiya__Tan/article/details/107045863

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说，直接上代码:

	<!--html部分代码  -->
	<div class="page">
        <p class="text">
            这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字
        </p>
    </div>

		/**
		 * @param {String} selector 必需，需要实现功能的元素,如'.text'
		 * @param {number} line  必需，最多显示的行数
		 */
        function setOmit(selector, line) {
			// 若缺少参数，直接返回
            if(!line || !selector) return;
            
         	// 通过jquery获取元素
            const el = $(selector);
			
            
			// 计算单个字符的实际宽度，计算方法为font-size + letter-spacing，并处理了letter-spacing为auto的情况
            const width = ((parseInt(el.css('letter-spacing')) ? parseInt(el.css('letter-spacing')) : 0) + parseInt(el.css('font-size')));
            
            // 通过计算元素宽度/一个字符实际占宽来确定一共显示多少字符
            const maxLength = line * parseInt(el.width() / width); 
            
			// 去除处理前文本节点前面的空格
            const resourceText = el.text().trim(); 
            
			// 若文字最多显示的字数大于当前传入节点的文本字数则直接return
            if (resourceText.length < maxLength) return; 
            
			// 根据maxLength截取原文本中的字符，并预留显示展示，收起的位置
            const text = resourceText.substring(0, maxLength - 4); 
            el.find('.showLess').remove();
            const showMore = `...<a class="showMore" setOmit resource=${el.text()} href=javascript:void(0)>[展开]</a>`;
            const showLess = `<a class="showLess" setOmit  href=javascript:void(0)>[收起]</a>`;


            if (el.find('.showMore').length > 0) {
                el.html(el.find('.showMore').attr('resource') + showLess)
            } else {
                el.html(text + showMore)
            }
            $('body').one('click', '[setOmit]', function() {
                setOmit(selector, line);
            })


        }
        
		 //调用时，只需要传入元素和显示的行数
		 setOmit('.text', 2)

效果如图

在这里插入图片描述

最后，总体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.js"></script>

    <link rel="stylesheet" href="./jquery.fancybox.min.css" />
    <script src="./jquery.fancybox.js"></script>
    <style>
        body {}
        
        p {
            width: 200px;
            font-size: 16px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="page">
        <p class="text">
            这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字
        </p>
    </div>
    <script>
    /**
		 * @param {String} selector 必需，需要实现功能的元素,如'.text'
		 * @param {number} line  必需，最多显示的行数
		 */
        function setOmit(selector, line) {
			//若缺少参数，直接返回
            if(!line || !selector) return;
            
            // 通过jquery获取元素
            const el = $(selector);

            // 计算单个字符的实际宽度，计算方法为font-size + letter-spacing，并处理了letter-spacing为auto的情况
            const width = ((parseInt(el.css('letter-spacing')) ? parseInt(el.css('letter-spacing')) : 0) + parseInt(el.css('font-size')));

            // 通过计算元素宽度/一个字符实际占宽来确定一共显示多少字符
            const maxLength = line * parseInt(el.width() / width);

            // 去除处理前文本节点前面的空格
            const resourceText = el.text().trim();

            // 若文字最多显示的字数大于当前传入节点的文本字数则直接return
            if (resourceText.length < maxLength) return;

            // 根据maxLength截取原文本中的字符，并预留显示展示，收起的位置
            const text = resourceText.substring(0, maxLength - 4);
            el.find('.showLess').remove();
            const showMore = `...<a class="showMore" setOmit resource=${el.text()} href=javascript:void(0)>[展开]</a>`;
            const showLess = `<a class="showLess" setOmit  href=javascript:void(0)>[收起]</a>`;


            if (el.find('.showMore').length > 0) {
            	//  若原文本中含有html标签，如'</br>''</hr>'之类的，就不适合将原文本放入resource中
                el.html(el.find('.showMore').attr('resource') + showLess)
            } else {
                el.html(text + showMore)
            }
            $('body').one('click', '[setOmit]', function() {
                setOmit(selector, line);
            })


        }


        setOmit('.text', 2)
    </script>
</body>

</html>

Emiya__Tan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控制文字超出多行显示隐藏，这一个简单易懂的函数就够了

话不多说，直接上代码:  <div class="page"> <p class="text"> 这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字 </p> </div>在这里插入代码片 function setOmit(selector, line) { // 先
复制链接

扫一扫

专栏目录