文本溢出

當(dāng)容器中的文本內(nèi)容超出容器的寬度或高度時(shí)，就會(huì)出現(xiàn)文本溢出的情況。下面介紹幾種CSS實(shí)現(xiàn)文本溢出的方法。

單行文本溢出省略

單行文本溢出省略通常用于標(biāo)題等文本顯示，可以通過(guò)設(shè)置white-space和text-overflow屬性實(shí)現(xiàn)。white-space屬性：用來(lái)設(shè)置元素中的空白如何處理，默認(rèn)值為normal，即會(huì)自動(dòng)忽略多余的空格和換行符。當(dāng)設(shè)為nowrap時(shí)，文本不會(huì)換行。

text-overflow屬性：用來(lái)控制溢出文本的顯示方式，默認(rèn)值為clip，即將溢出部分截去。當(dāng)設(shè)置為ellipsis時(shí)，會(huì)顯示省略號(hào)。

代碼示例：

<style>
  .overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">這是一段需要溢出省略的文本內(nèi)容</div>

多行文本溢出省略

多行文本溢出省略也可以通過(guò)設(shè)置text-overflow屬性來(lái)實(shí)現(xiàn)。但是，text-overflow屬性對(duì)于多行文本是不起作用的，需要結(jié)合其他屬性來(lái)實(shí)現(xiàn)。

-webkit-line-clamp屬性：用來(lái)限制顯示的行數(shù)。

display屬性：用來(lái)設(shè)置容器的display屬性為-webkit-box，使其變成一個(gè)塊級(jí)盒子。

-webkit-box-orient屬性：用來(lái)設(shè)置塊級(jí)盒子的排列方向?yàn)榇怪狈较颉?/p>

代碼示例：

<style>
  .overflow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">這是一段需要溢出省略的多行文本內(nèi)容，如果文本過(guò)長(zhǎng)會(huì)出現(xiàn)省略號(hào)</div>

多行省略

多行省略主要是用來(lái)實(shí)現(xiàn)在固定高度的容器中，將超出容器高度的文本省略掉。同樣，對(duì)于單行文本省略，可以使用text-overflow屬性，但對(duì)于多行省略，則需要結(jié)合其他屬性來(lái)實(shí)現(xiàn)。

使用純文本實(shí)現(xiàn)

通過(guò)調(diào)整行高和高度來(lái)實(shí)現(xiàn)多行文本省略。

代碼示例：

<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">這是一段需要省略的多行文本內(nèi)容，如果文本過(guò)長(zhǎng)會(huì)出現(xiàn)省略號(hào)</div>

使用偽元素實(shí)現(xiàn)

通過(guò)偽元素在文本后面添加省略號(hào)來(lái)實(shí)現(xiàn)多行文本省略。

代碼示例：

<style>
  .ellipsis::before {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 10px;
    background: white;
  }
  .ellipsis {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">這是一段需要省略的多行文本內(nèi)容，如果文本過(guò)長(zhǎng)會(huì)出現(xiàn)省略號(hào)</div>

到此這篇關(guān)于css溢出隱藏的幾種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css溢出隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！ 

最新評(píng)論