CSS單行文字以及多行文字溢位顯示省略號解決方案

阿新 • • 發佈：2021-01-24

技術標籤：CSS css

CSS單行文字以及多行文字顯示省略號解決方案

文章目錄

CSS單行文字以及多行文字顯示省略號解決方案

單行文字溢位顯示省略號

先看一個單行文字溢位後顯示省略號的效果，如下圖所示
單行文字溢位顯示省略號
如果單行文字設定寬度，並設定其文字不換行樣式即可實現這種效果，而對於文字寬度未知的，則已父元素的寬度為最大寬度，文字溢位的部分被隱藏並顯示省略號來表示文字溢位。

HTML結構如下：

<div class="text-inner">
	天將降大任於斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，
	所以動心忍性，增益其所不能。積土成山，風雨興焉，積水成淵，蛟龍生焉，積善成德，
	而神明自得，聖心備焉，故不積矽步，無以至千里，不積小流，無以成江河，騏驥一躍，
	不能十步，駑馬十駕，功在不捨。
</div>

CSS樣式如下：

.text-inner {
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow 
: ellipsis;
    border: 1px solid rgba(0,0,0,0.1);
}

多行文字溢位顯示省略號

多行文字溢位顯示省略號有多種方式實現，這裡只介紹三種純CSS樣式控制的效果。
下面就以僅顯示3行文字為例進行分析：

第一種效果：僅顯示3行文字溢位部分顯示省略號

第一種效果屬於完全靜態的，出顯示3行文字內容再無其他效果，具體實現如下：(不支援IE核心瀏覽器)
僅顯示3行文字的靜態效果
HTML結構：

<div class="text-inner">
    天將降大任於斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，
    所以動心忍性，增益其所不能。積土成山，風雨興焉，積水成淵，蛟龍生焉，積善成德，
    而神明自得，聖心備焉，故不積矽步，無以至千里，不積小流，無以成江河，騏驥一躍，
    不能十步，駑馬十駕，功在不捨。
</ 
div>

CSS樣式設定：

.text-inner {
	width: 500px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid rgba(0,0,0,0.1);
}

第二種效果：僅顯示3行文字溢位部分顯示省略號，並且滑鼠上浮顯示完整文字內容

第二種效果是在第一種效果的基礎上添加了滑鼠懸浮展開效果(不支援IE核心瀏覽器)
滑鼠懸浮顯示完整文字
HTML結構：

<div class="text-inner">
    <p>
        天將降大任於斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，
        所以動心忍性，增益其所不能。積土成山，風雨興焉，積水成淵，蛟龍生焉，積善成德，
        而神明自得，聖心備焉，故不積矽步，無以至千里，不積小流，無以成江河，騏驥一躍，
        不能十步，駑馬十駕，功在不捨。
    </p>
    <span class="icon-arrow"></span>
</div>

CSS樣式如下：

.text-inner {
	position: relative;
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    border: 1px solid rgba(0,0,0,0.1);
}
.icon-arrow {
	position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    width: 10px;
    height: 10px;
    padding: 5px;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #808080;
    transform: rotate(-45deg);
    cursor: pointer;
}
.text-inner:hover {
    overflow: visible;
    display: block;
}

第三種效果：僅顯示3行文字溢位部分顯示省略號，並且滑鼠點選摺疊箭頭顯示完整文字內容，點選其他位置收起完整文字內容

第三種效果與第二種效果類似，唯一的區別是滑鼠的作用區域不同，第二種效果是滑鼠懸浮觸發，第三種效果是滑鼠點選觸發(不支援IE核心瀏覽器)
滑鼠點選顯示完整文字
HTML結構如下：

<div class="text-inner">
    <button class="icon-arrow"></button>
    <p>
        天將降大任於斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，
        所以動心忍性，增益其所不能。積土成山，風雨興焉，積水成淵，蛟龍生焉，積善成德，
        而神明自得，聖心備焉，故不積矽步，無以至千里，不積小流，無以成江河，騏驥一躍，
        不能十步，駑馬十駕，功在不捨。
    </p>
</div>

CSS 樣式設定如下：

.text-inner {
	position: relative;
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    white-space: normal;
    border: 1px solid rgba(0,0,0,0.1);
}
.icon-arrow {
	position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    width: 10px;
    height: 10px;
    padding: 5px;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #808080;
    transform: rotate(-45deg);
    cursor: pointer;
}
.icon-arrow:focus {
    transform: rotate(135deg);
}
.icon-arrow:focus ~ p {
    display: block;
    overflow: visible;
}