CSS超出部分省略號的用法詳解

一、CSS超出部分省略號顯示文字

CSS超出部分省略號可以非常方便地讓文字在超出寬度的時候變成省略號，從而提高頁面顯示的美觀性，同時也提高了用戶體驗。

一般來說，我們可以通過以下代碼來實現文字超出部分省略號的效果：

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

代碼解析：

• display: -webkit-box; 屬性讓文字按照行排列，而不是按照塊排列。
• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• -webkit-box-orient: vertical; 讓文字垂直排列。
• -webkit-line-clamp: 2; 限制行數為2，即顯示2行文字。

二、CSS超出部分省略號懸浮提示

如果在CSS超出部分省略號的基礎上，加上懸浮提示效果，可以讓用戶更好地了解文本的全部內容。

我們可以使用以下代碼來實現這一效果：

.text {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    word-wrap: break-word;
    cursor: pointer;
}
.text:hover {
    white-space: normal;
    word-wrap: break-word;
}

代碼解析：

• white-space: normal; 允許文本自動換行。
• word-wrap: break-word; 當單詞長度超過容器的時，自動換行。
• cursor: pointer; 鼠標變成指針樣式。
• .text:hover 懸浮時展示全部文本。

三、CSS超出顯示省略號

CSS超出顯示省略號是另一種實現CSS超出部分省略號的方法，其實現代碼如下所示：

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

代碼解析：

• width: 200px; 指定元素的寬度值。
• white-space: nowrap; 禁止換行。
• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。

四、CSS文字超出顯示省略號

除了元素寬度超出之外，也可以使用CSS對文本的寬度進行限制，並超出時顯示省略號。

我們可以使用以下代碼來實現這一效果：

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

代碼解析：

• width: 200px; 指定元素文本的寬度值。
• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• white-space: nowrap; 禁止換行。

五、CSS超出省略號後面加東西

在CSS超出部分省略號的基礎上，我們可以在省略號後面加上其他元素，以便提供更多的信息。

以下是一個實現方法：

.text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.text:after {
    content: '...';
    color: red;
    font-weight: bold;
}

代碼解析：

• display: inline-block; 元素變成內聯塊狀元素，以便佔據父級元素中的可用空間。
• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• white-space: nowrap; 禁止換行。
• max-width: 200px; 文本最大寬度不超過200px。
• .text:after 添加的元素表示在省略號後面添加的元素。
• content: '...'; 表示添加的內容為省略號。
• color: red; 設置省略號的顏色為紅色。
• font-weight: bold; 設置省略號的字體為粗體。

六、CSS超出部分顯示省略號

除了使用省略號代替文本，還可以使用其他符號，比如中文省略號和英文省略號。

以下是一個實現方法：

.text {
   text-overflow: clip;
   white-space: nowrap;
   overflow: hidden;
}
.text:after {
   content: "...";
}

代碼解析：

• text-overflow: clip; 隱藏超出部分。
• white-space: nowrap; 禁止換行。
• overflow: hidden; 超出部分隱藏。
• .text:after 添加的元素表示在省略號後面添加的元素。
• content: '...'; 表示添加的內容為中文省略號。

七、CSS超出字數省略號

CSS超出字數省略號可以以字數為基礎自動截取文本，並把超出的部分用省略號表示。

以下是一個實現方法：

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

代碼解析：

• display: block; 元素變成塊狀元素，以便佔據父級元素中的可用空間。
• overflow : hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• white-space: nowrap; 禁止換行。
• max-width: 200px; 文本最大寬度不超過200px。

八、CSS文本超出省略號

CSS文本超出省略號與CSS超出部分省略號類似，但是它是基於詞而不是基於行的，也就是說，可以給單詞文本添加省略號。

以下是一個實現方法：

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

代碼解析：

• display: block; 元素變成塊狀元素，以便佔據父級元素中的可用空間。
• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• white-space: nowrap; 禁止換行。
• width: 200px; 元素的寬度不超過200px。
• -ms-text-overflow: ellipsis; 兼容IE瀏覽器。

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

文本超出部分省略號的另一種實現是，隱藏超出的部分，以詞為基礎添加省略號。

以下是一個實現方法：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    display: inline-block;
    vertical-align: top;
}

.text::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: -0.5em;
    text-indent: -999em;
    vertical-align: top;
}

代碼解析：

• overflow: hidden; 隱藏超出部分。
• text-overflow: ellipsis; 超出部分顯示省略號。
• white-space: nowrap; 禁止換行。
• width: 200px; 元素的寬度不超過200px。
• display: inline-block; 元素變成內聯塊狀元素，以便佔據父級元素中的可用空間。
• vertical-align: top; 把元素的頂部與行內框的頂部對齊。
• .text::after 隱藏部分添加省略號，是添加的後面元素。
• content: ""; 表示添加的內容為空字符串。
• display: inline-block; 元素變成內聯塊狀元素，以便佔據父級元素中的可用空間。
• width: 0.5em; 元素寬度為0.5個em。
• height: 1em; 元素高度為1個em。
• margin-left: -0.5em; 左邊距為-0.5個em。
• text-indent: -999em; 設定文本縮進，即把文本縮進超過元素寬度的距離。
• vertical-align: top; 把元素的頂部與行內框的頂部對齊。