讓溢位的文字以省略號顯示一共分為三步:
第一步 強制讓文字在一行顯示:
/*強制讓文字在一行內顯示*/
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...