成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

多行或者單行文本超出顯示點(diǎn)點(diǎn)點(diǎn)，如果保證內(nèi)容始終垂直居中？

sydMobile / 2378人閱讀

摘要：我現(xiàn)在的需求是這樣的，我目前實(shí)現(xiàn)了一個(gè)框，顯示文字，超出兩行顯示，如果單行要保證垂直居中，我如果給容器使用則當(dāng)文字內(nèi)容過(guò)多的時(shí)候會(huì)不上下文字有截?cái)喱F(xiàn)在效果如下只能顯示兩行，超出顯示省略號(hào)解決方法垂直居中的

我現(xiàn)在的需求是這樣的，我目前實(shí)現(xiàn)了一個(gè)div框，顯示文字，超出兩行顯示...，如果單行要保證垂直居中，我如果給容器使用display:flex;align-items:center；則當(dāng)文字內(nèi)容過(guò)多的時(shí)候會(huì)不上下文字有截?cái)啵?/p>

現(xiàn)在效果如下：

?

?

.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;
      }
    }
    
/*只能顯示兩行，超出顯示省略號(hào)*/
.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一個(gè)固定高度這里是兩行文字的行高，里面文字不要給高度，當(dāng)有一行的時(shí)候里面的div高度就是一行的高度就會(huì)垂直居中，有兩行文字的時(shí)候就會(huì)顯示兩行的文字，并且不影響超出顯示點(diǎn)點(diǎn)點(diǎn)的效果；

修改后的樣式：

.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;
      }
    }

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1501.html

相關(guān)文章

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

  • 自定義多行文本溢出方案

    摘要：成立多年來(lái)，騰訊一直秉承一切以用戶價(jià)值為依歸的經(jīng)營(yíng)理念，為億級(jí)海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù)，始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。年月日，騰訊控股有限公司在香港聯(lián)交所主板公開上市股票代號(hào)。 1.單行文本溢出點(diǎn)點(diǎn)點(diǎn) 單行文本溢出是最常見的一種形式，使用text-overflow的ellipsis即可實(shí)現(xiàn)點(diǎn)點(diǎn)點(diǎn)，overflow屬性也不可少，同時(shí)不能讓容器換行，否則不會(huì)出現(xiàn)點(diǎn)點(diǎn)點(diǎn) showImg(htt...

    Baoyuan 評(píng)論0 收藏0

  • 對(duì)css居中的一點(diǎn)總結(jié)

    摘要：為了更好的加深對(duì)居中的理解，搜集和閱讀相關(guān)資料，發(fā)現(xiàn)不錯(cuò)的文章將其整理出來(lái)。 在學(xué)習(xí)前端的過(guò)程中，發(fā)現(xiàn)元素和文本的水平居中和垂直居中，是經(jīng)常會(huì)出現(xiàn)的問(wèn)題，在實(shí)際工作中也會(huì)經(jīng)常碰到。居中的技巧有很多，但在編寫代碼的過(guò)程中，發(fā)現(xiàn)有時(shí)候技巧管用，有時(shí)候不管用，于是就將每個(gè)知道的方案都試一遍，找到合適的。這種情況究其原因是對(duì)居中的認(rèn)識(shí)不夠深入，只是停留在實(shí)現(xiàn)需求的水平上。為了更好的加深對(duì)居中的...

    BenCHou 評(píng)論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

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

    lijinke666 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<