文字超出三行省略...顯示全文

1、在開發過程中，我們經常會用到這種超出三行顯示...的要求，使用css屬性是可以的，但是需要考慮兼容性問題

實現單行文本的溢出顯示省略號，我們應該都知道用text-overflow:ellipsis屬性，同時注意加width來兼容部分瀏覽器；

.textOVerFlow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

實現三行在此基礎上擴展：

.textOVerThree {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

因為使用了WebKit的CSS擴展屬性，該方法適用於WebKit瀏覽器及移動端；

2、此處延伸 ，超出三行顯示展示全文，如果使用以上屬性我們可以發現，實際上dom里面的文字沒有改變，只是視覺上有...，實現超出三行顯示全文，分為兩步：

（1）、是否滿足三行

（2）、是否出現了省略號...  或者說是否超過了三行

 

那麽對應的解決方案：

（1）行數我們可以通過 使用 line-height*num 與 dom的高度進行比較，但是無法判讀是否三行全部占滿，

（2）因為上面屬性是實際文本內容並沒有改變，所以說，我們可以獲取到實際dom的高度，scrollHeight，與 我們需要的高度進行比較即可；

setCheckAll('.p_14', 3, '查看全文', 'text_blue');
/*設置必須有line-height   超過多少行顯示文字查看全文*/
function setCheckAll(select, num, text, name) { //num 代表行數 text為添加顯示的文字，

    var height = $(select).height(),

    realityHeight = $(select).get(0).scrollHeight;

    lineHeight = $(select).css('line-height');

    lineHeight = lineHeight.split('px')[0];

    if(height + 1 >= lineHeight * num && realityHeight >= lineHeight * num) {

        $(select).after('<p class="' + name+ '">' + text + ' ></p>');

    };　　　　

　　//lineHeight * num 是幾行的高度，只要 實際的高度超過了設定的這個高度，就可以認為是超出了 num 行 

  }

　　

 

以上有什么問題歡迎指出，蟹蟹！

 

菜菜叨逼叨

在本次需求中，也算是一個小學習吧，本來是想通過判斷文字的字數來控制“查看全文”的展示與否，這種方法實現太過復雜，需要考慮不同屏幕的尺寸，文字中的特殊字符，包括可能存在的<br/>；跟產品的談判又失敗了，在設計上一點小的調整，可以降低開發的時間與難度，但是需求方一再不肯退步，手動狗頭。如果在時間充足的條件下，可以考慮實現難點，如果時間緊迫，建議還是先找一種易實現的設計形式；不然只能兩敗俱傷啊~~~~~~~~~~~~~

 

 

 

轉載請注明出處，雖然我是一只小菜雞~