CSS文本超出隱藏詳解

CSS文本超出隱藏在網頁布局中應用廣泛。它可以用來美化界面，以及帶來更好的用戶體驗。在本文中，我們將從多個方面進行詳細闡述，包括CSS超出隱藏、CSS文本超出2行顯示省略號、CSS文本超出省略號、CSS文本超出換行、CSS文字超出隱藏變省略號、CSS圖片超出部分隱藏、CSS文本超出用省略號代替、CSS超出部分隱藏、CSS文本超出省略、CSS文本超出中間省略等方面展開。

一、CSS超出隱藏

CSS超出隱藏可以使用text-overflow屬性實現。這個屬性指定當文本溢出包含元素時發生的事情。默認情況下，任何溢出都不會發生再現。這意味著無論文本溢出多少，瀏覽器都會顯示所有文本。但是，可以使用以下幾個值來定義text-overflow屬性：

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

1、ellipsis
使用ellipsis值會將超出部分按照省略號「…」隱藏起來。但是，為了使該值正常工作，必須在元素的樣式定義中包含white-space:nowrap;和overflow:hidden;這兩個屬性。

2、clip
clip值將超出部分切除，使其在邊界內不可見。該值僅適用於單行文本（如果有溢出）。

3、string
string值將超出的文本字元串only截斷。這意味著，超出部分完全被丟棄，不會使用省略號或剪切而隱藏。

二、CSS文本超出2行顯示省略號

CSS文本超出2行顯示省略號可以使用-webkit-line-clamp實現。可以使用一個CSS屬性-webkit-line-clamp，它可以讓塊元素（如div）只顯示特定數量的文本行：

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

上述代碼會讓「.text」這個元素只顯示兩行文本。任意超過該行數的文本都將被省略，並用省略號表示。

三、CSS文本超出省略號

CSS文本超出省略號，可以使用CSS的偽元素before和after結合white-space屬性來實現。

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text:before {
    content: "...";
    position: absolute;
    left: -25px;
}

上述代碼會在文本超出時，給文本前面添加一個省略號。在這裡，偽元素before中的屬性content會在文本前面插入一個省略號（…）。
另外，width屬性指定了文本區域寬度，並使用white-space:nowrap屬性禁止文本換行，overflow:hidden屬性防止文本溢出，text-overflow:ellipsis屬性確保用省略號截斷超出的文本。

四、CSS文本超出換行

CSS文本超出換行，可以使用break-word和word-wrap屬性實現,這裡我們取word-wrap。

.text {
    width: 200px;
    word-wrap: break-word;
}

上述代碼將在文本超出時，自動將其斷行。word-wrap屬性主要用於指定如果文本太長不適合容器寬度怎麼處理。如果將其設置為break-word，則可以在中間斷開單詞以使文本適合容器寬度。否則，超出部分將擠壓到容器以外，而不會自動換行。

五、CSS文字超出隱藏變省略號

CSS文字超出隱藏變省略號，可以使用text-overflow、white-space和overflow屬性來實現。

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

上述代碼可以讓文本超出時用省略號替換隱藏。

六、CSS圖片超出部分隱藏

CSS圖片超出部分隱藏，可以使用overflow屬性實現。

.img {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: url(example.jpg) center center no-repeat;
}

上述代碼會使用overflow:hidden隱藏掉多餘的圖片部分。同時，使用background屬性將圖片的路徑和位置設置為居中和不重複。

七、CSS文本超出用省略號代替

CSS文本超出用省略號代替，可以使用text-overflow、white-space和overflow屬性來實現。

.text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

上述代碼可以讓文本超出時用省略號替換隱藏。

八、CSS超出部分隱藏

CSS超出部分隱藏可以通過一些屬性來實現。下面我們來舉一個例子。

首先，HTML代碼如下：

<div class="text"> 
  <p>This is a long text might exceed the parent element</p>
</div>

接著我們可以使用如下CSS樣式來進行設置。

.text {
    width: 200px;
    height: 30px;
    overflow: hidden;
}
.text p {
    margin: 0;
    position: relative;
    top: -10px;
}

上述代碼中，我們設置text類別元素的寬度為200px，高度為30px，超出的部分使用overflow:hidden隱藏起來。在其中，「This is a long text might exceed the parent element」這段話超出了設定的高度。為了讓其能被顯示出來，我們使用了一個p標籤，通過設置其position屬性為relative，top為-10px，將文本向上移動，從而顯示出超出部分。

九、CSS文本超出中間省略

CSS文本超出中間省略可以通過CSS的text-indent、::before、::after、white-space、text-overflow和overflow屬性來實現。我們來看下面的例子。

首先，HTML代碼如下：

<div class="text"> 
  <p>This is a long text might exceed the parent element</p>
</div>

接下來，使用如下CSS樣式來進行設置：

.text {
    position: relative;
    width: 200px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
}
.text::before,
.text::after {
    content: "...";
    position: absolute;
    top: 0;
}
.text::before {
    left: 0;
    width: 25%;
    text-align: right;
}
.text::after {
    right: 0;
    width: 25%;
}
.text p {
    margin: 0;
    text-indent: -9999px;
}

上述代碼中，我們首先設置text類別元素的寬度為200px，高度為30px，超出的部分使用overflow:hidden隱藏起來。在其中，「This is a long text might exceed the parent element」這段話超出了設定的高度。為了使匹配的CSS生效，我們為元素使用了position: relative屬性，以使得.text::before和.text::after的position:absolute定位相對於text元素。

在上述代碼中，我們使用了::before和::after偽元素，在不同的位置插入了省略號。使用 position和z-index屬性將這些元素合理的顯示起來。

因文本溢出而導致的顯示問題，我們將文本縮進到-9999px，這樣這段文本就會被隱藏。

總結

本文從CSS超出隱藏、CSS文本超出2行顯示省略號、CSS文本超出省略號、CSS文本超出換行、CSS文字超出隱藏變省略號、CSS圖片超出部分隱藏、CSS文本超出用省略號代替、CSS超出部分隱藏、CSS文本超出省略、CSS文本超出中間省略等多個方面進行了詳細的闡述。在項目中，可以根據具體需求選擇不同的方法進行應用。