css溢出隱藏的幾種方法實(shí)現(xiàn)
我要評論文本溢出
當(dāng)容器中的文本內(nèi)容超出容器的寬度或高度時(shí)，就會出現(xiàn)文本溢出的情況。下面介紹幾種CSS實(shí)現(xiàn)文本溢出的方法。
單行文本溢出省略
單行文本溢出省略通常用于標(biāo)題等文本顯示，可以通過設(shè)置white-space和text-overflow屬性實(shí)現(xiàn)。white-space屬性：用來設(shè)置元素中的空白如何處理，默認(rèn)值為normal，即會自動忽略多余的空格和換行符。當(dāng)設(shè)為nowrap時(shí)，文本不會換行。
text-overflow屬性：用來控制溢出文本的顯示方式，默認(rèn)值為clip，即將溢出部分截去。當(dāng)設(shè)置為ellipsis時(shí)，會顯示省略號。
代碼示例：
<style>
.overflow {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div class="overflow">這是一段需要溢出省略的文本內(nèi)容</div>多行文本溢出省略
多行文本溢出省略也可以通過設(shè)置text-overflow屬性來實(shí)現(xiàn)。但是，text-overflow屬性對于多行文本是不起作用的，需要結(jié)合其他屬性來實(shí)現(xiàn)。
-webkit-line-clamp屬性：用來限制顯示的行數(shù)。
display屬性：用來設(shè)置容器的display屬性為-webkit-box，使其變成一個(gè)塊級盒子。
-webkit-box-orient屬性：用來設(shè)置塊級盒子的排列方向?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)容，如果文本過長會出現(xiàn)省略號</div>多行省略
多行省略主要是用來實(shí)現(xiàn)在固定高度的容器中，將超出容器高度的文本省略掉。同樣，對于單行文本省略，可以使用text-overflow屬性，但對于多行省略，則需要結(jié)合其他屬性來實(shí)現(xiàn)。
使用純文本實(shí)現(xiàn)
通過調(diào)整行高和高度來實(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)容，如果文本過長會出現(xiàn)省略號</div>使用偽元素實(shí)現(xiàn)
通過偽元素在文本后面添加省略號來實(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)容，如果文本過長會出現(xiàn)省略號</div>到此這篇關(guān)于css溢出隱藏的幾種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css溢出隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css overflow: hidden 的用法(溢出隱藏及清除浮動)
overflow:hidden是經(jīng)常用到的一個(gè)css屬性，它有兩種常用用法：溢出隱藏和清除浮動，這里就為大家介紹一下,需要的朋友可以參考下2020-03-13css overflow溢出隱藏(文字溢出時(shí)的自動隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時(shí)，通過設(shè)置css下的overflow屬性來隱藏其內(nèi)容2013-03-07
