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>
文章就到这里啦,本人功力尚浅,若有不妥之处请谅解指正,谢谢!