三探【文字溢位省略】：純css實作“任意行數”截斷處理

筆者之前有過對此功能的兩次探究：
https://blog.csdn.net/qq_43624878/article/details/110124299 這篇文章主要描述了文本溢位省略功能的實作，以及用js大致模擬了其原理和如何用js動態實作“溢位省略”；
后來的 https://blog.csdn.net/qq_43624878/article/details/120993013 這篇文章又進一步從實際場景研究了不同情況下的溢位對用戶體驗的影響；

本文將結合之前的文章用css代替js實作動態“多行溢位省略”效果，并描述由此帶來的一些“周邊”問題，

首先，在上一篇文章中也提到，很多情況下我們確實要去實作“多行溢位省略”的效果，單行的文字會給用戶帶來不好的體驗，所以在第一篇文章中通過js實作了這一功能，
但拋開js中繁雜的計算不說，這已然‘違背’了筆者曾經提過的「優先策略」之一：HTML > CSS > JavaScript！

這里依然從實際場景（代碼及截圖已脫敏）一步一步分析：

多行溢位

一開始筆者的代碼是這樣寫的：

<!-- region是“xxx;xxx;xxx”這樣的字串格式 -->
<div class="fss-r-detail" v-if="ele.region">{{ele.region}}</div>

要求最多顯示兩行，溢位省略：

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

這樣的代碼不僅只能在webkit 內核瀏覽器中才能生效，還有一個關鍵問題：它必須和外層設定的“高度”合作 —— 如果外層設定的高度不足以支撐 -webkit-line-clamp: 2; ，那結果豈不是很尷尬？

如何讓外層高度控制一切呢？
由于高度是固定的，如果讓內容部分自適應剩余空間，就可以完美實作這個效果，這就要用到 flex 布局：

<div class="fss-r-detail" v-if="ele.region">
    <div class="fss_r-detail-li">{{ele.region}}</div>
</div>

.fss-r-detail {
	max-height: 81rpx; //這里給一個高度
}
.fss_r-detail-li {
	flex: 1;
	overflow: hidden;
}

當然，很多元素像「行內元素」我們就完全不需要考慮flex的問題：因為他們本身就是一個接一個鋪滿父元素的！

接下來就是省略號的問題：省略號永遠在右側，那我們其實可以考慮一個“很少被使用”的屬性——浮動float

.fss-r-detail::before {
	content: "...";
	float: right;
}

現在看效果的話，其實省略號是在“右上角”的，和子元素頂部對齊，要將它移到右下角，有兩種方案：

• 通過一個浮動元素將其現在的位置占住
• shapes布局

第一種方案顯然是“不合時宜”的：從省略號本身來說，他是偽元素，脫離于檔案流存在，能不借助于額外元素移動位置必然是我們首要考慮的，

在此之前，應當將省略號高度撐滿整個父元素，并且向下對齊：

.fss-r-detail::before {
	content: "...";
	float: right;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

然后現在又來了一個新問題：因為是高度撐滿的，所以省略號所在位置上面的文字也被擠走了，形成了一個鮮明的左右布局而不是環繞效果！
這時候就需要 shapes布局 出手了：

.fss-r-detail::before {
	/** 其它樣式 **/
	shape-outside: inset(calc(100% - 1.5em) 0 0);
}

shape-outside屬性要想生效，本身需要是浮動float元素，

可以看到，目前已經實作我們需要的效果了，

接下來是文章開頭提到的問題：如何自動隱藏省略號？

這個其實就是取巧的方法，也可以說是“視覺屏蔽”：用一個足夠大的色塊（和背景色一樣）蓋住省略號，設定絕對定位后，色塊會跟隨內容文本，當文字較多時，色塊也就跟隨文本移動，看著像是“被擠下去了”，此時結合overflow:hidden的效果就隱藏了省略號：

.fss-r-detail {
	/** 其它屬性 **/
	position: relative;
}
.fss-r-detail::after {
	content: "";
	position: absolute;
	width: 999vh;
	height: 999vh;
	background: #fff;
	box-shadow: -2em 2em #fff;
}

最后的box-shadow是向下的陰影，為了應對個別情況下可能遮擋不住省略號的問題！

結構改變

在上面的HTML結構中，提到“region是“xxx;xxx;xxx”這樣的字串格式”，現在因為要對其中某個地區文字做樣式處理，所以它不能是純字串展示，于是我將其改為下面的樣式：

<div class="fss-r-detail" v-if="ele.region">
    <ul>
    	<li class="fss_r-detail-li" :class="這里做特殊樣式處理" v-for="(item, index) in ele.region.split(';')" :key="index">{{item}}</li>
    </ul>
</div>

因為li是塊元素，所以我要對ul做處理：很容易想到的是flex：

ul {
	display: flex;
	flex-wrap: wrap; //flex默認是不允許換行的
}

然后問題就又出現了：

咦？為嘛沒有超過兩行也顯示出了省略號？這河里嗎？
我們看一下此時的文本dom是什么樣的：

給浮動的省略號加一個margin-left：

OK，可以看到，文字部分因為有了flex而默認鋪滿整個父元素的，而此時觸碰了省略號元素的位置，由上面定制的規則來看，被認為是“有文字超出規定區域了”，

這時我突然想到，為什么要加ul呢？索性直接對li設定display屬性讓其變為行內元素：

<div class="fss-r-detail" v-if="ele.region">
    <li class="fss_r-detail-li" v-for="(item, index) in ele.region.split(';')" :key="index">{{item}}</li>
</div>

.fss_r-detail-li {
    position: relative;
    display: inline;
    margin-right: 8rpx;
    &:not(:nth-of-type(1)) {
        padding-left: 4rpx;
    }
    &::after { //不用字串后為了不添加復雜結構的前提下不對現在文字的樣式造成影響，用偽元素的形式實作文字后面的“;”
        content: ";";
        position: absolute;
        top: 0;
        right: 100%;
    }
}

就可以了！

inline-block導致的問題

上面我對li設定了inline，那能不能用inline-block呢？
不能，塊級元素（行內塊也有塊級的效果）不能自動折行，這會導致我們前面辛辛苦苦設定的“環繞效果”毫無用武之地，哪怕你設定了word-break:break-all;

而且最離譜的是：為了達到和純字串一樣的效果，筆者用偽元素實作了每個詞后面的分號“；”，但是為了最后一個沒有分號而不加過多的css樣式，采用了“前置偽元素”的做法：每個li元素后面的分號實際上是下一個元素的偽元素，第一個元素的偽元素被隱藏在前面了！
這樣的話用block得到的效果就是如上面這張圖一樣：第一行最后的分號不見了，

涉及的樣式代碼

筆者的專案是使用less寫樣式的，這里就不做改變了，直接放出：

.fss-r-detail {
    max-height: 81rpx;
    position: relative;
    overflow: hidden;

    .fss_r-detail-li {
        position: relative;
        display: inline;
        // white-space: nowrap;
        margin-right: 8rpx;
            &:not(:nth-of-type(1)) {
                padding-left: 4rpx;
            }
        &::after {
            content: ";";
            position: absolute;
            top: 0;
            right: 100%;
        }
    }

    &::before{
        content: "...";
        float: right;
        height: 100%;
        display: flex;
        align-items: flex-end;
        shape-outside: inset(calc(100% - 1.5em) 0 0); // 以自身為邊界，四個方向向內縮進到靠近省略號位置，神來之筆
    }
    &::after {
        content: "";
        position: absolute;
        width: 999vh;
        height: 999vh;
        background: #FFFFFF;
        box-shadow: -2em 2em #FFFFFF;
    }
}