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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值