多行或者單行文本超出顯示點點點，如果保證內容始終垂直居中？

sydMobile 發布于2019-04-23 13:09 / 2379人閱讀

摘要：我現在的需求是這樣的，我目前實現了一個框，顯示文字，超出兩行顯示，如果單行要保證垂直居中，我如果給容器使用則當文字內容過多的時候會不上下文字有截斷現在效果如下只能顯示兩行，超出顯示省略號解決方法垂直居中的

我現在的需求是這樣的，我目前實現了一個div框，顯示文字，超出兩行顯示...，如果單行要保證垂直居中，我如果給容器使用display:flex;align-items:center；則當文字內容過多的時候會不上下文字有截斷；

現在效果如下：

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      div{
        .line-height(21);
        .height(42);
        .font-size(14);
        color: #000;
        letter-spacing: 0.01px;
      }
    }
    
/*只能顯示兩行，超出顯示省略號*/
.line_clamp2{
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
}

<div class="info_des">
        <div class="line_clamp2">is the leading online shopping platform in is the leading online shopping platform inis the leading online shopping platform indiv>
div>

解決方法：

display:flex；垂直居中的是里面元素的居中，那就給外層div一個固定高度這里是兩行文字的行高，里面文字不要給高度，當有一行的時候里面的div高度就是一行的高度就會垂直居中，有兩行文字的時候就會顯示兩行的文字，并且不影響超出顯示點點點的效果；

修改后的樣式：

.info_des {
      .margin-all(10, 10, 12, 8);
      display: flex;
      align-items:center;
      .height(42);
      div{
        .line-height(21);
        .font-size(14);
        color: #000;
        letter-spacing: 0.01px;
      }
    }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1501.html

css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
自定義多行文本溢出方案

摘要：成立多年來，騰訊一直秉承一切以用戶價值為依歸的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。年月日，騰訊控股有限公司在香港聯交所主板公開上市股票代號。 1.單行文本溢出點點點單行文本溢出是最常見的一種形式，使用text-overflow的ellipsis即可實現點點點，overflow屬性也不可少，同時不能讓容器換行，否則不會出現點點點 showImg(htt...

Baoyuan 2019-08-29 16:39 評論0 收藏0
對css居中的一點總結

摘要：為了更好的加深對居中的理解，搜集和閱讀相關資料，發現不錯的文章將其整理出來。在學習前端的過程中，發現元素和文本的水平居中和垂直居中，是經常會出現的問題，在實際工作中也會經常碰到。居中的技巧有很多，但在編寫代碼的過程中，發現有時候技巧管用，有時候不管用，于是就將每個知道的方案都試一遍，找到合適的。這種情況究其原因是對居中的認識不夠深入，只是停留在實現需求的水平上。為了更好的加深對居中的...

BenCHou 2019-08-29 11:17 評論0 收藏0
css table布局大法，解決你大部分居中、多列等高、左右布局的問題

摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中單行定高水平垂直居中單行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左邊定寬右邊自適應布局左邊右邊定寬中間自適應三列布局最...

lijinke666 2019-08-29 11:22 評論0 收藏0