实现文字的省略号

在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加省略号的时候,使用的是-webkit-line-clamp、-webkit-box-orient属性,会出现webpack打包-webkit-box-orient属性被忽略的情况,这里记录下

1.单行实现文字省略号

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;
clipboard.png

2.第几行实现文字省略号

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;
  • 使用webpack打包工具时,会忽视这个-webkit-box-orient属性,这里修改成下面的写法就可以了
display: -webkit-box; 
overflow: hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;
在这个注释里不要忘记加感叹号

3.用js实现字数后加省略号

  • 简单点的js截取后添加省略号
if (title.length > 26) {
  title = title.substring(0, 27) + "...";
}
  • 完整点的js截取后添加省略号
/* 对文字内容进行长度判断并在长度后添加省略号,试了对富文本也可以操作 */
function sliceWord(content) {
    let templateWord = '';
    /* 自定义文字内容长度 */
    const len = 523;
    if (content.length * 2 <= len) {
        return content;
    }
    /* 用于记录文字内容的总长度 */
    let strLength = 0;
    for (let i = 0; i < content.length; i++) {
        templateWord = templateWord + content.charAt(i);
        /* charCodeAt()返回指定位置的字符的Unicode编码,值为128以下时一个字符占一位,当值在128以上是一个字符占两位 */
        if (content.charCodeAt(i) > 128) {
            strLength = strLength + 2;
            if (strLength >= len) {
                return templateWord.substring(0, templateWord.length - 1) + "...";
            }
        } else {
            strLength = strLength + 1;
            if (strLength >= len) {
                return templateWord.substring(0, templateWord.length - 2) + "...";
            }
        }
    }
    return templateWord;
}

4.用伪元素加js实现省略号

  • html文件
<div id="root">
        <div class="content">都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会</div>
        <div class="content">是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会</div>
        <div class="content">都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会</div>
        <div class="content">兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会</div>
        <div class="content">都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会</div>
    </div>
  • css文件
#root{
    margin: 0 auto;
    width: 1200px;
}
.content{
    overflow: auto;
    position: relative;
    margin-bottom: 10px;
    width: 500px;
    height: 52px;
    line-height: 1.5;
}
.hiddenOverflow{
    overflow: hidden;
}
.hiddenOverflow::after{
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 12px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}
  • js代码
(function() {
    const content = document.getElementsByClassName('content');
    const length = content.length;
    for(let i = 0; i < length; i++) {
        /* 利用scrollHeight来判断 */
        if(content[i].scrollHeight > content[i].clientHeight) {
            content[i].className += ' hiddenOverflow';
        }
    }
})()
  • 效果图
clipboard.png

5.换行word-break和word-wrap

  • white-space:normal(自动换行),当写入的文字超过定义的宽度后会自动换行,但当写入的数据是一堆没有空格的字符或者字母或者数字时,超过容器的宽度时就会把容器撑大,不换行
  • 这时可以用:word-break:break-all;word-wrap:break-word来解决
  • word-break:break-all在超过容器宽度时,若有一个单词很长,则会将单词截断,分开写
  • word-wrap:break-word在超过容器宽度时,若有一个单词很长,则会将单词放到下一行,而不对单词进行截断
word-break : normal | break-all | keep-all
normal :允许在字内换行
break-all : 允许在单词内换行
keep-all : 只能在半角空格或连字符处换行。

word-wrap : normal | break-word
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也会发生
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

不努力,就不知道前面有多精彩

5.1k 声望
286 粉丝
0 条评论
推荐阅读
小程序实现手写签名
在微信小程序上实现手写签名,获取canvascontext新版本和旧版本有点坑,新版本在获取canvas后如果页面有滑动,则签名坐标出现异常(在微信开发者工具上会出现2022-2-17),但是在真机上即使滑动也不会出现异常,为...

小小蚊子23阅读 3.9k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

不努力,就不知道前面有多精彩

5.1k 声望
286 粉丝
宣传栏