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