CSS中過長的文字處理,使用overflow讓多餘的字變成..

剛好在切版練習的時候,發現有些文字太長的元件,會自動在最後將多出來的部分截斷,並且用…的符號修飾。雖然手動解決也是可以,但是當時我要處理超級大量的標題,如果一個一個處理,可能會處理不完,當你從後台要資料的時候,也必須使用到,所以當下查到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;

        }

顯示成果

我什麼都沒有
我是auto
我是visible
我是hidden
我是scroll
我是inherit

從結果可以知道

  • 一般沒加入任何改變就是超出邊界
  • 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;

        }

顯示成果

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.
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.
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.
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.
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.
  • 可以看到,沒有任何效果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;

        }

顯示成果

現在讓我們來測試這個功能,能不能讓多行縮減,並且使用…的方式去替代

現在讓我們來測試這個功能,能不能讓多行縮減,並且使用…的方式去替代

現在讓我們來測試這個功能,能不能讓多行縮減,並且使用…的方式去替代

  • 看到如果沒設定高度,又沒設定控制行數的情況,就會無限制的擴展,直到字數全部顯示
  • 第二種是我們要的結果,設定了行數為兩行,並且使用…為結尾
  • 因為沒有設定高度,所以在原本兩行是斷行顯示…,但後面還有多餘的空間,讓剩下的字又繼續往下呈現出來

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *