實現文字的省略號

在項目中有涉及實現一行或者第幾行後加省略號，在實現第幾行後加省略號的時候，使用的是-webkit-line-clamp、-webkit-box-orient屬性，會出現webpack打包-webkit-box-orient屬性被忽略的狀況，這裏記錄下

1.單行實現文字省略號

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

2.第幾行實現文字省略號

display: -webkit-box;
-webkit-box-orient: vertical;  /* 設置方向 */
-webkit-line-clamp: 2;  /* 設置超過爲省略號的行數 */
overflow: hidden;

• 使用webpack打包工具時，會忽視這個-webkit-box-orient屬性，這裏修改爲下面的寫法就能夠了

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

在這個註釋裏不要忘記加感嘆號

3.用js實現字數後加省略號

• 簡單點的js截取後添加省略號

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

• 完整點的js截取後添加省略號

/* 對文字內容進行長度判斷並在長度後添加省略號，試了對富文本也能夠操做 */
function sliceWord(content) {
    let templateWord = '';
    /* 自定義文字內容長度 */
    const len = 523;
    if (content.length * 2 <= len) {
        return content;
    }
    /* 用於記錄文字內容的總長度 */
    let strLength = 0;
    for (let i = 0; i < content.length; i++) {
        templateWord = templateWord + content.charAt(i);
        /* charCodeAt()返回指定位置的字符的Unicode編碼，值爲128如下時一個字符佔一位，當值在128以上是一個字符佔兩位 */
        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;
}

4.用僞元素加js實現省略號

• html文件

<div id="root">
        <div class="content">都市客飛機哦紅燒豆腐女神粉貸方金額我日收到貨費士大夫撒了空鏡頭is的回覆你打機大法蘭克就餓哦是久經風霜砥礪奮進是大佛安慰IE減肥了時代峯峻問餓哦日玩兒都我艾瑞網二十多的撒嬌風口浪尖阿誰會</div>
        <div class="content">是大佛安慰IE減肥了時代峯峻問餓哦日玩兒都我艾瑞網二十多的撒嬌風口浪尖阿誰會</div>
        <div class="content">都市客飛機哦紅燒豆腐女神粉貸方金額我日收到貨費士大夫撒了空鏡頭is的回覆你打機大法蘭克就餓哦是久經風霜砥礪奮進是大佛安慰IE減肥了時代峯峻問餓哦日玩兒都我艾瑞網二十多的撒嬌風口浪尖阿誰會</div>
        <div class="content">蘭克就餓哦是久經風霜砥礪奮進是大佛安慰IE減肥了時代峯峻問餓哦日玩兒都我艾瑞網二十多的撒嬌風口浪尖阿誰會</div>
        <div class="content">都市客飛機哦紅燒豆腐女神粉貸方金額我日收到貨費士大夫撒了空鏡頭is的回覆你打機大法蘭克就餓哦是久經風霜砥礪奮進是大佛安慰IE減肥了時代峯峻問餓哦日玩兒都我艾瑞網二十多的撒嬌風口浪尖阿誰會</div>
    </div>

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

• 效果圖

5.換行word-break和word-wrap

• white-space:normal(自動換行)，當寫入的文字超過定義的寬度後會自動換行，但當寫入的數據是一堆沒有空格的字符或者字母或者數字時，超過容器的寬度時就會把容器撐大，不換行
• 這時能夠用：word-break:break-all;word-wrap:break-word來解決
• word-break:break-all在超過容器寬度時，如有一個單詞很長，則會將單詞截斷，分開寫
• word-wrap:break-word在超過容器寬度時，如有一個單詞很長，則會將單詞放到下一行，而不對單詞進行截斷

word-break : normal | break-all | keep-all
normal :容許在字內換行
break-all : 容許在單詞內換行
keep-all : 只能在半角空格或連字符處換行。

word-wrap : normal | break-word
normal : 容許內容頂開指定的容器邊界
break-word : 內容將在邊界內換行。若是須要，詞內換行（word-break）也會發生

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 判斷ios和Android及PC端
  • webpack打包（有面試題）
  • 純css實現瀑布流（multi-column多列及flex佈局）