1、-webkit-line-clamp

可以把 塊容器 中的內(nèi)容限制為指定的行數(shù)。并且在超過行數(shù)后，在最后一行顯示"..."

這是正常的展示

display: -webkit-box; /*值必須為-webkit-box或者-webkit-inline-box*/ -webkit-box-orient: vertical; /*值必須為vertical*/ -webkit-line-clamp: 2; /*值為數(shù)字，表示一共顯示幾行*/ overflow: hidden;

這是加了 line-clamp 后的展示

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-line-clamp

2、all

將除卻 unicode-bidi 與 direction 之外的所有屬性重設(shè)至其初始值，或繼承值。

all: unset; /*initial | inherit | unset*/initial 改變該元素所有屬性的值至初始值。inherit 改變該元素的值 至 從父元素繼承的值
unset 如果該元素的屬性的值是可繼承的，重置為父元素的繼承的值，反之則改變?yōu)槌跏贾怠?h3>3、box-decoration-break

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-decoration-break

4、caret-color

用來定義插入光標（caret）的顏色，這里說的插入光標，就是那個在網(wǎng)頁的可編輯器區(qū)域內(nèi)，用來指示用戶的輸入具體會插入到哪里的那個一閃一閃的形似豎杠 | 的東西。

caret-color: red;

5、clip-path / shape-outside

clip-path 屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。類似的裁剪還有 svg 的 clipPath。

clip-path 的取值有以下幾種圖形

inset(xxx): 裁剪為長方形circle(xx): 裁剪為原型
ellipse(xxx): 裁剪為橢圓
polygon(xx): 裁剪為多邊形
none: 不裁剪

例子前的準備

<divstyle="width: 500px; height: 500px;text-align: left;background-color:gray;color:white" ><imgclass="clip-mode"style="float: left; margin:20px"src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"width="150"/>We had agreed, my companion and I, that I should call for him at his house,after dinner, not later than eleven o’clock. This athletic young Frenchmanbelongs to a small set of Parisian sportsmen, who have taken up “ballooning”as a pastime. After having exhausted all the sensations that are to be foundin ordinary sports, even those of “automobiling” at a breakneck speed, themembers of the “Aéro Club” now seek in the air, where they indulge in allkinds of daring feats, the nerve-racking excitement that they have ceased tofind on earth. </div>

不裁剪

clip-path: none;

圓形裁剪

clip-path: circle(40%); //半徑為40%，圓心默認為中心

橢圓裁剪

clip-path: ellipse(130px 140px at 10% 20%);

多邊形裁剪

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

我們可以看到上面圖形如何裁剪，外面的看不見的框始終是矩形，也就是說文字始終是按矩形的樣式在周圍環(huán)繞。

那么有辦法讓文字緊緊的貼在裁剪的圖形周圍呢？
有的，使用 shape-outside 屬性

shape-outside 定義了一個可以是 非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應圍繞該形狀進行包裹。默認情況下，內(nèi)聯(lián)內(nèi)容包圍其矩形邊距;

默認矩形環(huán)繞

clip-path: none; shape-outside: none

圓形環(huán)繞

clip-path: circle(40%); shape-outside: circle(40%);

橢圓環(huán)繞

clip-path: ellipse(130px 140px at 10% 20%); shape-outside: ellipse(130px 140px at 20% 20%);

多變性環(huán)繞

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

當然你不一定在圓形裁剪上，使用圓形環(huán)繞，你可以在圓形裁剪上使用多邊形環(huán)繞，在多邊形裁剪上，使用菱形環(huán)繞。總之這兩個之間沒關(guān)系，不是兩兩匹配的。都隨你便，自己定義

6、object-fit / object-position

object-fit 屬性指定可替換元素的內(nèi)容應該如何適應到其使用的高度和寬度確定的框。object-position 屬性來指定被替換元素的內(nèi)容對象在元素框內(nèi)的對齊方式。

注: 其中可替換元素有 iframe，video，embed，img，還有一些在特性情況也是可替換元素，option，audio，canvas，object

例子前的準備

<div style="width: 300px; height: 300px; background-color:gray;"><img class="clip-mode" style="height: 100%; width: 100%;" src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"> </div>

圖片一定能要設(shè)置為寬高 100%，即不能超過父容器，才可以設(shè)置 object-fit，否則沒意義。

fill 填滿 圖片會拉變形，寬度和高度都被拉到父容器的 100%，以適應父容器

object-fit: fill;

contain 包容 圖片不會變形，圖片會按照自身比例進行縮放，整個圖片放入父容器中，較短的邊會出現(xiàn)自動填充的空白。

object-fit: contain;

cover 覆蓋 圖片不會變形，圖片會按照自身比例進行縮放，整個圖片放入父容器中，按照圖片最短的邊，納入父容器為基準。較長的邊會溢出

object-fit: cover;

none 和父容器的寬高沒關(guān)系。展示其圖片最原始的寬高比，以自身圖片的“中心”為基點，放置到父容器的“中心”位置。

object-fit: none;

scale-down 內(nèi)容的尺寸與 none 或 contain 中的一個相同，取決于它們兩個之間誰得到的對象尺寸會更小一些。

object-fit: scale-down;

如果圖片比父容器尺寸大，那么按照 contain 的效果，如果圖片比父容器小，那么按照 none 的效果。

在上面 object-fit 的展示中，我們發(fā)現(xiàn)可替換元素的對齊方式都是自動的。

比如 object-fit: fill; 的左上角和父容器的左上角對齊。

object-fit: none;的中心和父容器的中心對齊等等。

但是我們想手動更改對齊方式呢？？

可以使用 object-position 屬性， 規(guī)定了可替換元素的內(nèi)容，在其內(nèi)容框中的位置。

object-position: 10px 10px; 可以設(shè)置 px，第一個值代表距離父容器左邊的距離，第二個值代表距離父容器頂部的距離。只有一個數(shù)值則只代表距離父容器左側(cè)的距離。也可以設(shè)置%數(shù)值，但此時只有某一邊有空白才會起作用，如果沒有空白，剛好鋪滿父元素，則不起作用。設(shè)置 px 就沒有這樣的問題，任何之后都會起作用。object-position: right top;可以設(shè)置關(guān)鍵字，第一個值關(guān)鍵字可設(shè)置（left|center|right），第二個關(guān)鍵字可設(shè)置(top|center|bottom),此時不表示距離左側(cè)或者頂部的距離，而表示放置在父元素的什么位置。object-fit: fill; object-position: 50px 50px; //距離左側(cè)10px，距離頂部10%

加 object-position 前后對比圖:

object-fit: contain; object-position: right top; //停留子 右上方

加 object-position 前后對比圖:

7、font-stretch

為字體定義一個正常或經(jīng)過伸縮變形的字體外觀，它僅僅意味著當有多種字體可供選擇時，會為字體選擇最適合的大小。

normal 默認字體semi-condensed, condensed, extra-condensed, ultra-condensed 小于默認字體
semi-expanded, expanded, extra-expanded, ultra-expanded 大于默認字體

8、font-variant-caps

可以控制大寫字母特殊字符的使用。

• normal 關(guān)閉一切特殊字符變體的使用。
• small-caps 允許小型大寫字母的使用（OpenType 特性：smcp）。小型大寫字母指使用大寫形式，但尺寸與對應小寫字母相同的字母。
• all-small-caps 將大小寫字母全部轉(zhuǎn)化為小型大寫字母。（OpenType 特性: c2sc, smcp）。
• petite-caps 允許特小型大寫字母的使用（OpenType 特性: pcap）。
• all-petite-caps 將大小寫字母全部轉(zhuǎn)化為小型大寫字母。（OpenType 特性: c2pc, pcap）。
• unicase 允許將大寫字母轉(zhuǎn)化為小型大寫字母與普通小寫字母的混用 （OpenType 特性: unic）。
• titling-caps 允許首字母大寫（OpenType 特性: titl）。大寫字母變體字符通常被設(shè)計成與用于小寫字母。在標題序列中，如果均使用大寫字母，可能會帶來過于強烈的視覺效果。首字母大寫即用來應對這種情況。

9、font-variant-east-asian

控制對東亞字符(如日語和漢語,韓語等)使用替代符號。

值有一下幾種:
normal; ruby; jis78; jis83; jis90; jis04; simplified; traditional; full-width; proportional-width

10、max-content / min-content / fill-available / fit-content

這幾個值都可用在 width, height, min-width, min-height, max-width 和 max-height 屬性上。

display 必須為 inline-block 或者 block，否則上面的值不起作用。

fill-available

元素撐滿可用空間。參考的基準為父元素有多寬多高。

類似子元素的 div 撐滿父元素的寬，fill-available 不僅可以撐滿寬還能撐滿高。

例子前的代碼

<div style="width: 300px; height: 100px; background-color:gray;"><span style="display:inline-block;background-color: burlywood;">這是子元素的內(nèi)容</span> </div>

給 span 上設(shè)置 fill-available 時的不同表現(xiàn)

假如里面的有個元素，是 img 呢？它也是 inline-block，應該也滿足情況。

我們可以看到 img 和 span 的不同在于，設(shè)置 width 或者 height 其中一個時，整個 image 會按照自身比例縮放。

max-content

它的寬度或者高度，會自動調(diào)整為，剛剛好容納下子元素中那個長度最長(按照文字不換行時計算)的元素即可。
參考的基準為子元素有多寬多高。

<div class="parent"><div class="current" style="width: 200px; height: 300px; background-color:gray;"><p>這是普通的p元素行，內(nèi)容為文字</p><img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/></div> </div>

給 current div 設(shè)置 max-content 時得不同表現(xiàn)。

min-content

它的寬度或者高度，會自動調(diào)整為，剛剛好容納下子元素中那個“最小寬度值”最大的元素即可，剩余超長的要么換行，要么溢出
參考的基準為子元素“最小寬度值”有多寬多高。

什么是“最小寬度值”？
比如圖片，最小寬度值，就是圖片原始的寬高；如果是一串中文，則最小寬度值為單個漢字的寬高；如果是一串英文，則最小寬度值為里面單詞最長的那個。

fit-content

表示元素自動伸縮到內(nèi)容的寬度，和 max-content 的區(qū)別為，都是剛剛好容納下子元素中那個長度最長的元素即可。

不同的是 max-content 在計算時按照文字不換行時計算，如果超過父元素，則不換行，直接產(chǎn)生滾動條； 而 fit-content 在超過父元素后，換行，不產(chǎn)生滾動條。

11、fit-content()

這個不同于上面的 fit-content 值，它是函數(shù)，用在 grid 布局當中。

(略)

具體查看 grid 布局

12、resize

比較簡單，可以查看

resize?developer.mozilla.org

13、scroll-behavior

當用戶通過 API 觸發(fā)滾動操作時，CSS 屬性 scroll-behavior 為一個滾動框指定滾動行為， 平滑到達還是立即到達

可以查看
官方文檔

14、max() / min()

max 在兩者這件取最大；min 函數(shù)在兩者之間取最小。

max，min 可以用在任何可以設(shè)置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

width: max(50vw, 300px); width: min(50vw, 300px);

15、clamp()

clamp 函數(shù)會在定義的 三個值之間，取中間的那個值，是大小在中間，不是位置在中間，

clamp(MIN, VAL, MAX)

和 max，min 函數(shù)一樣，可以用在任何可以設(shè)置 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> 等值的地方

font-size: clamp(1px, 3px, 2px); //中間值為2px font-size: clamp(1px, 3px, 5px); //中間值為3px font-size: clamp(4px, 3px, 5px); //中間值為4px width: clamp(200rem, 25vw, 150px); //在這三個之間取中間值

16、conic-gradient()

在漸變中我們知道，有:

• 線性漸變,linear-gradient，從一個方向，沿著另一個方向，顏色線性過渡。

• 徑向基漸變，radial-gradient，從某一個點，沿圓環(huán)向外慢慢輻射。

除此之外，還有一種漸變，叫"錐形漸變"。它是圍繞中心點按照扇形方向進行旋轉(zhuǎn)的漸變(而不是從中心點輻射)

這是錐形和徑向漸變的區(qū)別圖

background: conic-gradient(red, orange, black, green, blue);

默認從時鐘 12 點，按照順時針旋轉(zhuǎn)

18、:out-of-range / :in-range

比較簡單，可以查看官方文檔

:out-of-range

:in-range

19、writing-mode

定義了文本水平或垂直排布以及在塊級元素中文本的書寫方向

horizontal-tb 表示水平書寫，從上(top)到下(bottom)書寫vertical-rl 表示垂直書寫，從右(right)向左(left)(古人書法就這么寫的)
vertical-lr 表示垂直書寫，從左向右
注意沒有 horizontal-bt,不要杜撰

20、inline-size

和元素的 width，height 效果一樣，都會改變盒子的大小。但是會覆蓋 width，height 值。

不同在于，width 是絕對的水平方向，height 是絕對的豎直方向；

而 inline-size 是相對的水平方向，可通過 writing-mode 模式，改變方向

21、block-size

類似于 inline-size，只不過和 inline-size 剛好相反，block-size 默認設(shè)置的是 height 方向的值。

原作者姓名： 寒水寺一禪
原出處：segmentfault
原文鏈接：那些不常見，但卻非常實用的css屬性(整理不易) - 個人文章 - SegmentFault 思否

總結(jié)

以上是生活随笔為你收集整理的css不换行属性_那些不常见，但却非常实用的css属性(整理不易)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。