最近遇到一個(gè)需求是要在第二行的中間截取文本，因?yàn)樵诤竺娴觅N一個(gè)圖標(biāo)，所以這種情況用常規(guī)的css截取文本有點(diǎn)難處理。于是在上網(wǎng)查閱后發(fā)現(xiàn)了幾個(gè)方法：第一種是用偽元素加定位，把.；11..蓋在文字的上面；第二種就是用js來(lái)實(shí)現(xiàn)了。
首先貼下常規(guī)的css截取文本的代碼，這種在大多數(shù)情況都可以適用
1、單行文本的溢出隱藏
white-space: nowrap;// 設(shè)置文字在一行顯示，不能換行
overflow: hidden;// 文字長(zhǎng)度超出限定寬度時(shí)隱藏溢出的內(nèi)容
text-overflow: ellipsis;// 當(dāng)文字溢出時(shí)，顯示...來(lái)代表溢出的文本2、多行文本的溢出隱藏
-webkit-line-clamp: 2;// 用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)，2 表示最多顯示 2 行。
-webkit-box-orient: vertical;// 和 1 結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式
overflow: hidden;
text-overflow: ellipsis;然后開始說(shuō)下如何用js來(lái)實(shí)現(xiàn)
思路就是通過(guò)判斷字符串的長(zhǎng)度來(lái)找到截取的位置，然后用slice()方法獲取從0到指定位置的字符，后面的字符都切掉，再補(bǔ)一個(gè) ... 來(lái)實(shí)現(xiàn)。
noMoreWord = (text) => {
let newText = text
if(text.length > 39) newText = text.slice(0, 39)
return newText
}但是這樣處理其實(shí)是有漏洞的，因?yàn)樵O(shè)計(jì)稿是全中文的時(shí)候在一行半溢出隱藏，但是實(shí)際情況肯定會(huì)有英文字母、數(shù)字、英文符號(hào)出現(xiàn)的，而這些字符占的位置和中文占的位置是不一樣的。所以在這里需要根據(jù)先獲取字符的總字節(jié)，然后通過(guò)字節(jié)的長(zhǎng)度來(lái)決定需不需要隱藏。下面是優(yōu)化后的代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-692106.html
//判斷字符串為中文字符串還是英文字符串，中文字符、符號(hào)占兩個(gè)字符，英文字符、符號(hào)和數(shù)字占一個(gè)字符
getStrLength = (str) => {
let len = 0
for(let i = 0; i < str.length; i++) {
//中文字符
if (str.charCodeAt(i) > 127) {
len += 2
} else {
len++
}
}
return len
}
//字符串截取
noMoreWord = (text, length, color='#000000') => {
let newText = text;
//字符長(zhǎng)度大于參數(shù)length的，把后面多余的字符截取掉，替換為...。
if (getStrLength(text) > length * 2) {
newText = <span>{text.slice(0, length)}<span style={{color: color}}>...</span</span>;
}
return newText
};?注意noMoreWord()中的length是你傳入的長(zhǎng)度，而getStrLength()中返回的是這串文本字節(jié)的長(zhǎng)度，所以在判斷時(shí)需要把length*2。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-692106.html
到了這里，關(guān)于js實(shí)現(xiàn)一行半文本的截取的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
