CSS3之hyphens(連字元)

2021-08-22 04:31:52 字數 720 閱讀 1349

1、連字元

連字元分為硬連字元和軟連字元:

硬連字元:‐,即使該單詞沒有中間換行,也會顯示連字元

軟連字元:­,只有單詞中間換行才顯示連字元

2、hyphens屬性

css3提供了hyphens屬性指定文字多行自動換行應斷字。既可以在單詞中使用軟連字元指定換行點,也可以由瀏覽器在適當的位置插入換行符。

屬性值:

可以加字首-webkit--ms-

hyphens:none; / *即使單詞中有換行符,也不會換行,只會在空白處換行* /

hyphens:manual; / *只有單詞中有建議換行符才會換行,即插入­ * /

hyphens:auto; / *瀏覽器在適當的位置自動插入連字元換行* /

注意:為了確保奏效,在html標籤中加lang屬性指定語言,如:

class="text-line" lang="en">

this only way to

get rid of a tempta­tion is

to yield to

it!div>

.text-line

但是以上示例測試並沒有效果,文件是這樣說明的。

CSS3之圓角製作

如今css3中的border radius出現後,讓我們沒有那麼多的煩惱了,首先製作圓角的時間是省了,而且其還有多個優點 其一減少 的維護的工作量,少了對的更新製作,的替換等等 其 二 提高 的效能,少了對進行http的請求,網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...

CSS3之背景縮放

背景縮放 css3 通過background size設定背景的尺寸,就像我們設定img的尺寸一樣,在移動web開發中做螢幕適配應用非常廣泛。其引數設定如下 a 可以設定長度單位 px 或百分比 設定百分比時,參照盒子的寬高 b 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢...

CSS3資料之邊框

邊框圓角 屬性 border radius 圓角處理時,腦中要形成圓 圓心 橫軸 縱軸的概念,正圓是橢圓的一種特殊情況。如圖所示,我們將四個角標記成1 2 3 4,css裡提供了border radius來 分別設定這些角橫縱軸半徑,以 進行分隔,遵循 1,2,3,4 規則。前面的 1 4個用來設定...