剛好在切版練習的時候，發現有些文字太長的元件，會自動在最後將多出來的部分截斷，並且用…的符號修飾。雖然手動解決也是可以，但是當時我要處理超級大量的標題，如果一個一個處理，可能會處理不完，當你從後台要資料的時候，也必須使用到，所以當下查到text-overflow用法就立刻記下來
要達到這個效果需要三個不同作用的方法，分別是overflow、white-space跟text-overflow，所以依照順序一一先了解個別功能
內容目錄
overflow介紹
是超出邊界範圍的時候，該呈現甚麼樣的效果，跟text-overflow有點像，但是他能處理的範圍更大，可以不只處理文字，還能處理圖片，跟其他元件超出的問題
設定值介紹
| auto | 自動的預設，產生自動捲軸 |
| visible | 讓內容直接超出範圍，不使用捲軸 |
| hidden | 隱藏超出的內容 |
| scroll | 自動產生捲軸 |
| inherit | 繼承父元素 |
呈現方式
設定六個框，分別為沒有東西、auto、visible、hidden、scroll、inherit
- 每個邊框為100*100(px的邊框，除了inherit為30*30
- 每個元件內加入150*150(px的圖片，已經超出原本框的大小
HTML
<div class=”text-“>
我什麼都沒有
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
<div class=”text-auto”>
我是auto
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
<div class=”text-visible”>
我是visible
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
<div class=”text-hidden”>
我是hidden
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
<div class=”text-scroll”>
我是scroll
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
<div class=”text-hidden”>
我是inherit
<div class=”textinherit”>
<img src=”https://lh3.googleusercontent.com/proxy/ZUF7R08U1HNcxJqdccyZ1BkIvM4dLe5IditHaKMOM6-Xl5BUw-jIhTxlcszir6maYYGnM7BHaBa_doDyPm0Cf6Cl7-iNouEbUw8yJy8MyNFGVaZCfcGC”
alt=””>
</div>
</div>
CSS
[class^=”text-“] {
display: inline-block;
height: 100px;
width: 100px;
border: 1px solid black;
margin-left: 70px;
}
[class^=”text-“] img {
height: 150px;
width: 150px;
}
.text-auto {
overflow: auto;
}
.text-visible {
overflow: visible;
}
.text-hidden {
overflow: hidden;
}
.text-scroll {
overflow: scroll;
}
.textinherit {
overflow: inherit;
height: 30px;
width: 30px;
}
顯示成果
從結果可以知道
- 一般沒加入任何改變就是超出邊界
- visible是預設值，就是不執行任何改變讓他超出
- scroll跟auto的效果就是讓產生卷軸，對於超出邊框的部分，給予拖曳卷軸的效果
- hidden是比較常用的部分，很多時候為了版面設定，會直接使用hidden去控制所有元素，讓他可以限制在這個範圍之內
- inherit比較特別，是繼承上層元件的元素，不過如果沒有特別設定，其實大家都是預設為visible，示範中我選擇最明顯的hidden讓他繼承
white-space介紹
這是用來處理空白字符的顯示，還有一個主要功能是用來控制換行，這邊主要我們要用他的換行功能，所以使用他的normal屬性，這個屬性可以使他的同一行字，不會被斷行
其他功能參考這篇文章徹底搞懂word-wrap、white-space等
text-overflow 介紹
text-overflow是專門處理過長的文字，可以針對超出範圍的部分進行處理，例如：，直接截斷、或變成…，其實透過overflow跟 white-space就可以達到不換行跟切斷的效果，但text-overflow可以再多呈現…的效果
設定值介紹
| clip | 將超出的範圍文字切斷 |
| ellipsis | 用…來表示被切斷的文字 |
| initial | 預設值 |
| inherit | 繼承父元素 |
呈現方式
首先設定五個盒子，分別設定屬行為沒有設定、clip、ellipsis、initial、inherit
這裡還使用上面所介紹的overflow、white-space，使用邏輯是這樣，設定一個範圍讓overflow:hidden去控制邊界、white-space讓所有文字控制在同一行、最後text-overflow呈現出被斷掉的部分，有哪些效果
- 裡面加入一些亂字
- 大小為100*100(px的範圍，inherit設定為30*30px
HTML
<div class=”txt-“>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quisquam dolorem optio perspiciatis expedita
molestias ipsa, esse explicabo unde fuga dolores sapiente reiciendis quibusdam cupiditate praesentium mollitia
id nulla est.
</div>
<div class=”txt-clip”>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quisquam dolorem optio perspiciatis expedita
molestias ipsa, esse explicabo unde fuga dolores sapiente reiciendis quibusdam cupiditate praesentium mollitia
id nulla est.
</div>
<div class=”txt-ellipsis”>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quisquam dolorem optio perspiciatis expedita
molestias ipsa, esse explicabo unde fuga dolores sapiente reiciendis quibusdam cupiditate praesentium mollitia
id nulla est.
</div>
<div class=”txt-initial”>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quisquam dolorem optio perspiciatis expedita
molestias ipsa, esse explicabo unde fuga dolores sapiente reiciendis quibusdam cupiditate praesentium mollitia
id nulla est.
</div>
<div class=”txt-ellipsis”>
<div class=”txt-inherit”>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quisquam dolorem optio perspiciatis expedita
molestias ipsa, esse explicabo unde fuga dolores sapiente reiciendis quibusdam cupiditate praesentium
mollitia
id nulla est.
</div>
</div>
CSS
[class^=”txt-“] {
height: 100px;
width: 100px;
border: 1px solid black;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
}
.txt-clip {
text-overflow: clip;
}
.txt-ellipsis {
text-overflow: ellipsis;
}
.txt-initial {
text-overflow: initial;
}
.txt-inherit {
text-overflow: inherit;
height: 30px;
width: 30px;
}
顯示成果
- 可以看到，沒有任何效果overflow的情況跟使用initial跟clip的情況是一樣的
- ellipsis當文字被切斷時，就顯示…
- 最後我讓inherit繼承ellipsis的屬性，所以顯示效果就會是…
多行顯示 … 的方式
現在知道需要overflow、white-space、text-overflow來呈現效果，但這只能呈現一行，如果我想要多行怎辦，目前知道的方式有一種就是使用
加入使用
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
呈現方式
設定三個盒子，分別是沒有加入變化、沒有設定盒子高度、設定盒子高度
- 寬度都是設定100px，只有最後一個設定高100px
HTML
<p class=”tet”>
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
</p>
<p class=”tet-1″>
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
</p>
<p class=”tet-2″>
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
</p>
CSS
[class^=”tet”] {
width: 100px;
border: 1px solid black;
}
[class^=”tet-“] {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tet-2 {
height: 100px;
}
顯示成果
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
現在讓我們來測試這個功能，能不能讓多行縮減，並且使用…的方式去替代
- 看到如果沒設定高度，又沒設定控制行數的情況，就會無限制的擴展，直到字數全部顯示
- 第二種是我們要的結果，設定了行數為兩行，並且使用…為結尾
- 因為沒有設定高度，所以在原本兩行是斷行顯示…，但後面還有多餘的空間，讓剩下的字又繼續往下呈現出來