使用css和js对字符进行限制，超出部分用省略号替代

最新推荐文章于 2023-08-22 18:02:55 发布

原创最新推荐文章于 2023-08-22 18:02:55 发布 · 887 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #javascript #前端

文章介绍了如何使用CSS和JavaScript来限制字符显示，当内容超过特定长度时，用省略号表示。首先展示了CSS的white-space、text-overflow和overflow属性用于单行文本限制。然后通过JS编写函数动态限制字符数，当内容超过30个字符时，截取前30个字符并添加省略号。最后，文章提到了将该功能封装成可复用的方法，便于在不同场景下应用。

1.首先使用css对字符进行限制

   /* css部分*/
    <style>
        .word {
            width: 300px;
            height: 100px；
            background-color: skyblue;
            white-space: nowrap;/*不允许换行*/
            text-overflow: ellipsis;/*省略号*/
            overflow: hidden;/*超出部分隐藏*/
        }
    </style>
    <div class="box">
        <p class="word">在一片森林里，住着一只老虎和一只小猫，老虎住在山顶，小猫住在山脚。山上的小溪往山下流，正好从小猫家门前流过。它们都过着宁静而悠闲的生活。</p>
    </div>

下面是效果展示，使用css进行限制的话只能单行，它是确定标签宽度，超出部分就使用省略号替代，用于单行。

2.使用js对字符的数量进行限制，超出规定数量的就使用省略号替代

/*html标签*/
 <div class="box">
        <p class="word">在一片森林里，住着一只老虎和一只小猫，老虎住在山顶，小猫住在山脚。山上的小溪往山下流，正好从小猫家门前流过。它们都过着宁静而悠闲的生活。</p>
 </div>

/*js部分*/
<script>
        
        let word =document.querySelector('.word')
        let newWord = word.innerHTML
        limit()
        function limit() {
            if(newWord.length > 30) {
              //确定现有p标签内容的长度，超过30就截取前30个字符并加上省略号
              word.innerHTML =   newWord.substring(0,30) + '...'
            }
        }
    </script>

效果图如下

2.1 封装方法，方便复用

//limit.js
export function  wordLimit(newWord,word,num) {
    if(newWord.length > num) {
        word.innerHTML=  newWord.substring(0,num) + '......'
    }
}

//调用
<script type="module">
        import {wordLimit} from './limit.js'
        let word =document.querySelector('.word')
        let newWord = word.innerHTML
        wordLimit(newWord,word,30)
    </script>

文章就到这里啦，本人功力尚浅，若有不妥之处请谅解指正，谢谢！