CSS 三個步驟讓溢位的文字以省略號 顯示

2021-10-12 10:16:46 字數 731 閱讀 6578

讓溢位的文字以省略號顯示一共分為三步:

第一步 強制讓文字在一行顯示:

/*強制讓文字在一行內顯示*/

white-space

:nowrap;

white-space我們通常使用於強制一行顯示內容,它有兩個值

/*預設處理方式,不會強制一行顯示*/

white-space

:normal;

/*強制在一行顯示文字,直到文字結束或通過br換行*/

white-space:nowrap;

第二步 超出的部分讓它隱藏

/*將溢位/超出的部分隱藏*/

overflow

:hidden;

第三步 用省略號來代替超出的部分

text-overflow

:ellipsis;

text-overflow文字溢位,有兩個值:

/*不顯示省略號,而是最簡單的裁切*/

text-overflow

:clip;

/*當物件文字溢位時顯示省略號…*/

text-overflow

:ellipsis;

注意

一定要先強制一行內顯示,然後在和overflow屬性搭配使用。

溢位文字顯示三個點

有時候會有溢位文字省略,然後顯示三個點的要求。需要注意 1 一定要給容器設定 寬度。2 容器不能是flex布局,需要改為 block 或者 inline block。單行文字時,只需要給元素設定下面屬性 需要先設定容器寬度 1 overflow hidden 2 text overflow elli...

Oracle 啟動的三個步驟

oracle 資料庫的啟動需要三個步驟,當我們直接輸入startup進行啟動時,實際上資料庫已經隱含的將三個步驟一起執行。而實際上,oracle的啟動過程包括了啟動例程,裝載資料庫,開啟資料庫。每完成乙個步驟,資料庫就進入了乙個特定的環境,以保證資料庫進入了某種一致性的狀態。本文即是對這三個步驟中需...

css 的三個技巧

1 等比例縮小 imgbox imgbox img2 多行文字省略 單行 text 多行 text關於display webkit box 的講解 3 強制性換行 一般元素預設是white space normal 自動換行 但是如果是一些沒有空格的數字,字元,字母的話white space nor...