CSS06 文字溢位

2021-09-19 12:48:33 字數 404 閱讀 2110

專案中常常有這種需要我們對溢位文字進行"..."顯示的操作，單行多行的情況都有（具體幾行得看設計師心情了），這篇部落格是我個人對這種情況解決辦法的歸納，歡迎各路英雄指教。

文字溢位省略號顯示(條件):


1:不能讓文字換行 white-space:nowrap 文字不換行


2:讓超出的文字隱藏 overflow:hidden 讓溢位的文字隱藏


3:讓隱藏的文字省略號形式顯示 text-overflow:ellipsis 讓隱藏文字以省略號形式顯示


4:盒子的寬度!!!
案例:

單行文字溢位打點:
多行文字省略號顯示:

5文字溢位

文字溢位 overflow visible 預設值 hidden 超出隱藏 scroll 顯示滾動條 auto 自適應檢視 inherit 繼承父元素overflow值文字換行 white space normal 預設值 pre 原格式輸出，空白會被瀏覽器保留 pre wrap 文字不會換行，文字...

CSS06 彈性布局

彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 專案們排列方向...

CSS 06 彈性布局

1 彈性布局 彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 ...