CSS超出顯示省略號

一、滑鼠移入顯示

在一些需要強調的地方，我們可以設置滑鼠移入時顯示全部內容，以避免省略號的出現。我們可以藉助CSS中的: hover偽類來實現。例如，我們可以將一段長文字放在一個帶有固定高度和overflow屬性的容器中，然後在:hover時將overflow設為visible即可。

.content {
    height: 50px;
    overflow: hidden;
}
.content:hover {
    overflow: visible;
}

二、超出部分顯示省略號

在某些情況下，我們可能希望超出部分顯示省略號，這時可以使用CSS中的text-overflow屬性。text-overflow屬性只有在元素內的內容超出容器大小時才會起作用。當設置為ellipsis時，它會用省略號代替超出部分的內容。

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

三、顯示省略號

如果我們希望在元素的結尾顯示省略號，我們可以使用CSS中的ellipsis屬性，前提是要設置元素的寬度。

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

四、超出隱藏顯示省略號

如果我們不想讓內容以省略號的形式出現，而是希望完全隱藏超出的部分，也可以使用CSS中的overflow:hidden屬性。這樣，元素的大小就會限制內容，超出的部分就會被隱藏起來。

.content {
    width: 200px;
    overflow: hidden;
}

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

如果我們希望多行文字超出隱藏時變成省略號，而不是完全隱藏，我們可以使用CSS中的line-clamp屬性。這個屬性需要和其他屬性一起使用，如disply: -webkit-box、-webkit-box-orient、-webkit-line-clamp、overflow:hidden。

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

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

我們同樣可以通過line-clamp屬性限制行數，當我們要求元素中的文本在超過兩行後顯示省略號時，可以這樣設置：

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

七、超出文本省略顯示

在一些設計要求中，我們希望文本超過一定寬度後仍然可以省略。我們可以使用CSS中的white-space和text-overflow屬性來實現。white-space屬性用於定義元素內部空白的處理方式，而text-overflow屬性用於定義文本溢出元素時的處理方式。

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

八、兩行超出省略號

當我們需要限制文字不超過兩行時，如果超過兩行需要以省略號代替，我們可以使用CSS中的line-height屬性設置行高為文字大小的倍數，從而控制行數。

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

九、內容超出三行省略號

當我們需要限制文字不超過三行時，超過三行需要以省略號代替，可以使用CSS中的max-height、line-height和text-overflow屬性來實現。max-height是設置元素高度的最大值，line-height是設定每行文字的高度，text-overflow用於定義超出文本的處理方式。

.content {
    display: -webkit-box;
    height: 3.6em;
    line-height: 1.2em;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

十、超出一行顯示省略號

當我們只需要將超出一行的部分用省略號代替，可以設置元素的寬度和line-height屬性

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