BFC 新增省略號 圓角

2021-10-03 15:53:00 字數 1126 閱讀 2751

1. 觸發bfc的樣式

浮動元素:float 除 none 以外的值

絕對定位元素:position (absolute、fixed)

display 為 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

2. bfc解決的問題

解決子元素帶動父層級的問題

解決margin疊加問題

解決margin傳遞問題

解決浮動問題

解決覆蓋問題

3. 新增省略號

width

必須有乙個固定的寬

white-space : nowrap

不讓內容折行

overflow : hidden

隱藏溢位的內容

text-overflow : ellipsis

新增省略號

多行(了解):

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

4. 圓角

當寬高不一樣的情況下?

border-radius : 100px | 50% 這是有區別的

border-radius: 20px; 四個角

border-radius: 20px 40px; 左上和右下 右上和左下

border-radius: 20px 30px 40px 50px; 左上 右上 右下 左下 (順時針)

文字單行省略號 多行出現省略號

第一種僅支援單行省略 width value overflow hidden text overflow ellipsis white space nowrap 第二種支援多行省略 width value overflow hidden text overflow ellipsis display ...

簡單的css樣式 新增省略號

多餘字用省略號表示 width 200px overflow hidden text overflow ellipsis 文字溢位的部分隱藏並用省略號代替 white space nowrap 文字不自動換行 用了一段時間,才又發現,有些時候不起作用,這是還要加上一句 display block 多...

文字超出省略號之前後省略號實現

標籤 css js 最近在做聊天記錄需求時,對於查到的訊息體需要高亮顯示,前後內容超出需要顯示省略號,效果如下圖 對於後省略號是可以通過的一串css來實現的,主要是css的 段如下 css省略號 段 overflow hidden text overflow ellipsis position re...