资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/实现文字的省略号

实现文字的省略号

beanlam / 832人阅读

摘要：允许内容顶开指定的容器边界内容将在边界内换行。如果需要，词内换行也会发生正在努力学习中，若对你的学习有帮助，留下你的印记呗点个赞咯往期好文推荐判断和及端打包有面试题纯实现瀑布流多列及布局

在项目中有涉及实现一行或者第几行后加省略号，在实现第几行后加省略号的时候，使用的是-webkit-line-clamp、-webkit-box-orient属性，会出现webpack打包-webkit-box-orient属性被忽略的情况，这里记录下
1.单行实现文字省略号 
/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;
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文件


        
都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会

        
是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会

        
都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会

        
兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会

        
都市客飞机哦红烧豆腐女神粉贷方金额我日收到货费士大夫撒了空镜头is的回复你打机大法兰克就饿哦是久经风霜砥砺奋进是大佛安慰IE减肥了时代峰峻问饿哦日玩儿都我艾瑞网二十多的撒娇风口浪尖阿谁会

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";
        }
    }
})()

效果图

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）也会发生
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

判断ios和Android及PC端

webpack打包（有面试题）

纯css实现瀑布流（multi-column多列及flex布局）

云服务器 超融合服务器 js文字省略号 html5省略文字 webrtc实现网页文字聊天 省略号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98373.html

相关文章

  • 【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

    摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出 思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！ 效果图： showImg(https://segmentfault.com/img/bVbuV...

    PascalXie 评论0 收藏0

  • 【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

    摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出 思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！ 效果图： showImg(https://segmentfault.com/img/bVbuV...

    alaege 评论0 收藏0

  • 【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

    摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出 思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！ 效果图： showImg(https://segmentfault.com/img/bVbuV...

    魏宪会 评论0 收藏0

  • 自适应宽度元素单行文本省略用法探究

    摘要：单行文本省略和元素及其父元素的属性都无关元素或为元素内单行文本省略，需要给元素或为元素添加样式为元素的子元素如果是自适应宽度时，内的子元素实现单行文本省略，需要给添加样式单行文本省略是现代网页设计中非常常用的技术，几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景，如列表标题、文章摘要等。在响应式开发中，自适应宽度元素单行文本省略容易失效不起作用，对网页开发这造成困扰。因此，本文将要...

    K_B_Z 评论0 收藏0

  • input实现文字超出省略号功能

    input实现文字省略号功能 普通元素实现文字超出宽度自动变成省略号非常简单，给元素加个宽度，然后再加这三句css即可： white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 有没有想过给input=text元素也加这个效果呢？如图：showImg(https://segmentfault.com/i...

    NoraXie 评论0 收藏0

  • input实现文字超出省略号功能

    input实现文字省略号功能 普通元素实现文字超出宽度自动变成省略号非常简单，给元素加个宽度，然后再加这三句css即可： white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 有没有想过给input=text元素也加这个效果呢？如图：showImg(https://segmentfault.com/i...

    Eminjannn 评论0 收藏0

发表评论

登陆后可评论

0条评论

beanlam

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<