文档章节

计算动态字符串宽度,多行实现展开收起

三水_M
 三水_M
发布于 2017/06/22 14:02
字数 732
阅读 285
收藏 0

计算动态字符串宽度,多行实现展开收起

思路: 创建span元素,添加到页面隐藏,将字符串添加到span中,获取span宽度, 与父容器宽度比对,超过行数,截取字符串(可设置自定义属性,存储原始字符串)

  • 知识点

  • getComputedStyle 计算属性

  • offsetWidth 元素相对父元素的偏移宽度

  • [程序员福利广告]

    • 外卖红包群 +微信 1165763207 发送[ 外卖 ] 自动获取入群邀请
  • codepen在线效果预览

<!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>计算动态字符串宽带,多行实现展开收起</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            width: 300px;
            margin: 0 auto;
            font-size: 14px;
            line-height: 16px;
            border: 1px solid red;
            word-break: break-all; /* 打断所有单词 */
        }
    </style>
</head>

<body>
        <div id="box"></div>
    <script>
        // 获取容器的宽度
        var box =document.querySelector('#box');
        var styles = window.getComputedStyle(box, null);
        var wd = parseInt(styles.width);
        /**
        * 计算字符占用的宽度
        * str 字符串
        * strFontSize 字符串字体大小
        * wd 文本父容器宽度
        * lineNum 超过几行隐藏
        */
        function calcStringPixelsCount(data) {
            var str = data.str;
            var strFontSize = data.strFontSize || '16px';
            var wd = data.wd || 200;
            var lineNum = data.lineNum || 2;
            // 字符串字符个数
            var stringCharsCount = str.length;
            // 字符串像素个数
            var stringPixelsCount = 0;
            // 控制截取字符串长度
            var flag = true; 
            // 截取后的字符串
            var subStr = '';
            // JS 创建HTML元素:span
            var elementPixelsLengthRuler = document.createElement("span");
            elementPixelsLengthRuler.style.fontSize = strFontSize; // 设置span的fontsize
            elementPixelsLengthRuler.style.visibility = "hidden"; // 设置span不可见
            elementPixelsLengthRuler.style.display = "inline-block";
            elementPixelsLengthRuler.style.wordBreak = "break-all !important"; // 打断单词

            // 添加span
            document.body.appendChild(elementPixelsLengthRuler);
            // 计算字符所占宽度
            for (var i = 0; i < stringCharsCount; i++) {
                // 判断字符是否为空格,如果是用&nbsp;替代,原因如下:
                // 1)span计算单个空格字符( ),其像素长度为0
                // 2)空格字符在字符串的开头或者结尾,计算时会忽略字符串
                if (str[i] === " ") {
                    elementPixelsLengthRuler.innerHTML = "&nbsp;";
                } else {
                    elementPixelsLengthRuler.innerHTML = str[i];
                }
                stringPixelsCount += elementPixelsLengthRuler.offsetWidth;
                // 截取特定长度的字符串
                if ((stringPixelsCount > lineNum * wd) && flag) {
                    flag = false;
                    subStr = str.substring(0, i);
                    console.log(subStr);
                }
            }
            console.log(stringPixelsCount);
            if (stringPixelsCount / wd > lineNum) {
                return subStr + '...';
            }
            return false;
        }
        // 此处模拟从后台动态获取不确定字数的字符串
        var t =
            '低价省钱购 http://djsqg.cn 天猫优惠券 外卖红包群 +微信 1165763207 发送[ 外卖 ] 自动获取入群邀请 农产品价格大起大落,损害的不只是生产者的利益,更会影响消费者的日常生活。因此,需进一步提高信息预警准确度,构建全产业链上各种农产品供求预警系统。并加快农业生产结构的调整,尽快改变大而不强、低端同质竞争的现状。这样才能让生产者有赚头,让消费者得实惠——';
        var t1 = calcStringPixelsCount({
            str: t,
            strFontSize: '16px',
            wd: wd,
            lineNum: 3
        });
        box.innerHTML = t1 ? '<span class="txt">' + t1 + '</span><a id="more" href="javascript:void(0);">展开</a>' : '<span class="txt">' + t + '</span>';

        var more = document.querySelector('#more');
        var txt = document.querySelector('.txt');
        more && more.addEventListener('click', function () {
            if (more.innerText === '展开') {
                txt.innerText = t;
                more.innerText = '收起';
            } else {
                txt.innerText = t1;
                more.innerText = '展开';
            }
        });
    </script>
</body>

</html>

© 著作权归作者所有

三水_M
粉丝 0
博文 2
码字总数 1387
作品 0
徐汇
私信 提问
实现微信朋友圈动态列表

前言 项目中需要实现类似朋友圈动态的列表,需要用到图文混排,正好可以使用ibireme大神的开源控件YYText实现这种效果,在这里记录一下使用过程中遇到的问题,参考文章iOS 保持界面流畅的技巧...

_誌念
2017/12/01
0
0
RecycleView实现多布局可展开列表

前言 在开发的时候,我们不免会遇到这么一种数据展示,该数据有以下特征: 数据要以列表形式展示 每条数据要分多行展示,如第一行展示姓名,第二行展示培训课程,第三行显示培训时间 每行展示...

奔跑的佩恩
2018/05/16
0
0
Element 2.1.0 发布,基于 Vue 2.0 的桌面端组件库

Element 2.1.0 已发布,更新如下: 新特性 Cascader 新增 和 事件,#9184 Table 方法加入第三个参数 ,#9196 DatePicker 新增 和 属性,#9237 新增 属性,#9094 属性增加对 的支持,#9319 I...

王练
2018/02/01
3.2K
13
notepad++的好用快捷键整理

notepad++的好用快捷键整理 1. 文档切换 ctrl+tab 向右切换文档(当然在文档列表菜单弹出来时,可以用鼠标进行快速选择) ctrl+shift+tab 同上,只是切换方向是向左的 在任意文档中按下鼠标右...

zhangvae
2014/01/13
2.7K
0
微信小程序过长文本折叠效果的探索

之前做小程序开发时,遇到要实现过长文本进行的折叠的效果(类型微信朋友圈那种)。主要交互有三点: 让文本过长时折叠、并显示一个“全文”的点击文本 当用户点击“全文”则会展开被折叠的文...

LevonLin
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 谨以此文怀念逝去的人

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 今天没歌曲 手机党少年们想听歌,请使劲儿戳(这里) 今天是周六, 刚想开始写乱弹的时候, 翻到了巴叔新建的话题上, @ 巴拉迪维:宏哥,一路...

小小编辑
29分钟前
9
0
判断php变量是否定义,是否为空,是否为真的一览表

使用 PHP 函数对变量 $x 进行比较 表达式 gettype() empty() is_null() isset() boolean : if($x) $x = ""; string TRUE FALSE TRUE FALSE $x = null; NULL TRUE TRUE FALSE FALSE var $x; N......

Grayk
今天
12
0
服务器监控

1. 服务器监控内容有哪些? 答: 主要有服务监控 和 流量监控 2. 监控重点是? 答: 是 磁盘 和 流量,cpu是浮动的,意义不大 3. 怎样 实现 监控? 答:将 服务器 分为:监控者 和 被监管协议...

杨凯123
昨天
242
0
Apollo开发指南

一、准备工作 二、本地启动 2.1 Apollo Config Service和Apollo Admin Service 2.2 Apollo-Portal 2.3 Java样例客户端启动 2.4 .Net样例客户端启动 三、开发 3.1 Portal 实现用户登录功能 3....

Ciet
昨天
307
0
英文词汇 计算机网络中的专业英语单词及其缩写

学习计算机网络时,会阅读相关的专业文献。对于文献中经常出现的缩写形式的专业名词,做了一些积累。现于此博文中做个简单的分享,希望能对后来人有所帮助,平稳地入门计算机网络。 注:博文...

志成就
昨天
178
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部