文字の省略記号を実現

プロジェクトには、1行目または数行目に省略符を付け、数行目に省略符を付けた場合、-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ファイル

        
                               is                           IE                               
        
     IE                               
        
                               is                           IE                               
        
                   IE                               
        
                               is                           IE                               
    

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容器幅を超えると、1つの単語が長いと単語が切り捨てられ、

と別々に書く.

word-wrap:break-wordコンテナの幅を超えると、1つの単語が長い場合は、

を切断せずに次の行に単語を配置します.

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レイアウト)