摘要：允許內(nèi)容頂開指定的容器邊界內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行也會(huì)發(fā)生正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄點(diǎn)個(gè)贊咯往期好文推薦判斷和及端打包有面試題純實(shí)現(xiàn)瀑布流多列及布局

在項(xiàng)目中有涉及實(shí)現(xiàn)一行或者第幾行后加省略號，在實(shí)現(xiàn)第幾行后加省略號的時(shí)候，使用的是-webkit-line-clamp、-webkit-box-orient屬性，會(huì)出現(xiàn)webpack打包-webkit-box-orient屬性被忽略的情況，這里記錄下

/* 這里要顯示的設(shè)置寬度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出寬度則顯示ellipsis省略號 */
text-overflow: ellipsis;
width: 100%;

display: -webkit-box;
-webkit-box-orient: vertical;  /* 設(shè)置方向 */
-webkit-line-clamp: 2;  /* 設(shè)置超過為省略號的行數(shù) */
overflow: hidden;

使用webpack打包工具時(shí)，會(huì)忽視這個(gè)-webkit-box-orient屬性，這里修改成下面的寫法就可以了

display: -webkit-box; 
overflow: hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;

在這個(gè)注釋里不要忘記加感嘆號

簡單點(diǎn)的js截取后添加省略號

if (title.length > 26) {
  title = title.substring(0, 27) + "...";
}

完整點(diǎn)的js截取后添加省略號

/* 對文字內(nèi)容進(jìn)行長度判斷并在長度后添加省略號，試了對富文本也可以操作 */
function sliceWord(content) {
    let templateWord = "";
    /* 自定義文字內(nèi)容長度 */
    const len = 523;
    if (content.length * 2 <= len) {
        return content;
    }
    /* 用于記錄文字內(nèi)容的總長度 */
    let strLength = 0;
    for (let i = 0; i < content.length; i++) {
        templateWord = templateWord + content.charAt(i);
        /* charCodeAt()返回指定位置的字符的Unicode編碼，值為128以下時(shí)一個(gè)字符占一位，當(dāng)值在128以上是一個(gè)字符占兩位 */
        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;
}

html文件

        
都市客飛機(jī)哦紅燒豆腐女神粉貸方金額我日收到貨費(fèi)士大夫撒了空鏡頭is的回復(fù)你打機(jī)大法蘭克就餓哦是久經(jīng)風(fēng)霜砥礪奮進(jìn)是大佛安慰IE減肥了時(shí)代峰峻問餓哦日玩兒都我艾瑞網(wǎng)二十多的撒嬌風(fēng)口浪尖阿誰會(huì)
        
是大佛安慰IE減肥了時(shí)代峰峻問餓哦日玩兒都我艾瑞網(wǎng)二十多的撒嬌風(fēng)口浪尖阿誰會(huì)
        
都市客飛機(jī)哦紅燒豆腐女神粉貸方金額我日收到貨費(fèi)士大夫撒了空鏡頭is的回復(fù)你打機(jī)大法蘭克就餓哦是久經(jīng)風(fēng)霜砥礪奮進(jìn)是大佛安慰IE減肥了時(shí)代峰峻問餓哦日玩兒都我艾瑞網(wǎng)二十多的撒嬌風(fēng)口浪尖阿誰會(huì)
        
蘭克就餓哦是久經(jīng)風(fēng)霜砥礪奮進(jìn)是大佛安慰IE減肥了時(shí)代峰峻問餓哦日玩兒都我艾瑞網(wǎng)二十多的撒嬌風(fēng)口浪尖阿誰會(huì)
        
都市客飛機(jī)哦紅燒豆腐女神粉貸方金額我日收到貨費(fèi)士大夫撒了空鏡頭is的回復(fù)你打機(jī)大法蘭克就餓哦是久經(jīng)風(fēng)霜砥礪奮進(jìn)是大佛安慰IE減肥了時(shí)代峰峻問餓哦日玩兒都我艾瑞網(wǎng)二十多的撒嬌風(fēng)口浪尖阿誰會(huì)
    

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

效果圖

white-space:normal(自動(dòng)換行)，當(dāng)寫入的文字超過定義的寬度后會(huì)自動(dòng)換行，但當(dāng)寫入的數(shù)據(jù)是一堆沒有空格的字符或者字母或者數(shù)字時(shí)，超過容器的寬度時(shí)就會(huì)把容器撐大，不換行

這時(shí)可以用：word-break:break-all;word-wrap:break-word來解決

word-break:break-all在超過容器寬度時(shí)，若有一個(gè)單詞很長，則會(huì)將單詞截?cái)?，分開寫

word-wrap:break-word在超過容器寬度時(shí)，若有一個(gè)單詞很長，則會(huì)將單詞放到下一行，而不對單詞進(jìn)行截?cái)?/p>

word-break : normal | break-all | keep-all
normal :允許在字內(nèi)換行
break-all : 允許在單詞內(nèi)換行
keep-all : 只能在半角空格或連字符處換行。

word-wrap : normal | break-word
normal : 允許內(nèi)容頂開指定的容器邊界
break-word : 內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行（word-break）也會(huì)發(fā)生

正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）

往期好文推薦：

判斷ios和Android及PC端

webpack打包（有面試題）

純css實(shí)現(xiàn)瀑布流（multi-column多列及flex布局）