CSS中一些常用的文字屬性整理

2022-09-25 07:51:10 字數 1554 閱讀 2322

text-overflow

概要:其作用是解決文字溢位時,其展現的形式

該屬性有兩個引數,分別如下:

css code複製內容到剪貼簿

clip:不顯示省略標記(....),溢位的文字會被的裁減掉。

ellipsis:文字溢位時會顯示省略的標記(...),插入的位置是最後乙個字元。

要使該屬性起作用,還得具備以下幾個條件。

width | max-width:明確給需要擷取文字的容器設定寬度值。

white-space:nowrap:給文字容器設定強制不換行,讓元素文字在一行內顯示。

overflow:hidden:設定容器文字溢位時隱藏。

word-wrap

概要:該屬性可以控制換行。當屬性取值break-word時,將強制換行,中文文字沒有任何問題,英文語句也沒問題。但是對於對於長串的英文就不起作用,也就是說,word-wrap是控制是否短詞,而不是斷字元

該屬性有兩個引數,分別如下:

css code複製內容到剪貼簿

normal :預設值,瀏覽器只在半形空格或連字元的地方進行換行。

break-word: 將內容在邊界內換行(不截斷英文單詞換行)。

其兩者的不同點可以通過下面的對比圖進行區別。

由圖可知:當word-wrap值為normal時,超長的英文文字長度大於容器的寬度時會撐破容器伸展到容器的外面(ie6除外,ie6會自動拓展容器的寬度)。在設定了break-word時,長文字會自動換行,不足的是,它不會安裝單詞換行,可能會將乙個單詞截斷換行。

同時,word-wrap應用在pre或者t程式設計客棧able中時,將不會起作用。

word-break

概要:屬性主要針對亞洲語言和非亞洲語言進行控制換行。當屬性取值break-all時,可以允許非亞洲語言文字行的任意字內斷開;當屬性值為keep-all時,表示在中文、韓文、日文中是不允許字斷開的。

該屬性的引數有三個,其值如下所示:

css code複製內容到剪貼簿

normal:預設值,根據語言自己程式設計客棧的規則來確定換行方式,中文到邊界上的漢字換行,英文從整個單詞換行。

break-all:可以強行截斷英文單詞,達到詞內換行效果。

keep-all:不允許字斷開。如果是中文把前後標點符合內的乙個漢字短語整個換行,英文單詞整個換行;如果出現某個英文本元長度超過容器邊界,後面的部分將撐破容器,如果邊框為固定屬性,則後面的部分無法顯示。(ps:chrome該屬性無效,但是新增break-word屬性)

white-程式設計客棧space

概要:性具有格式化文字的作用,當屬性取值為nowrap時,表示強制在同意行內顯示所有文字;當屬性值為pre時,表示顯示預定義文字格式。

該屬性有以下的取值情況:

css code複製內容到剪貼簿

normal:預設值,空白會被瀏覽器忽略

pre:空白會被保留,呈現預定義文字格式

nowrap:文字不會換行,文字會在一行顯示

pre-line:合併空白符序列,但保留換行符。

pre-wrap:保留空白符序列,但是正常進行換行。

本文位址: /web/css/83632.html

CSS文字屬性整理

內容為1行時 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 內容為2行時 overflow hidden text overflow ellipsis display webkit b...

css常用文字屬性

文字對齊屬性 text align 這個屬性用來設定文字的對齊方式。有以下值 left 居左,預設值 right 居右 center 居中 justify 兩端對齊 示例 如下 p2 文字修飾屬性 text decoration 這個屬性主要設定文字劃線的屬性。有以下值 none 無,預設值 und...

CSS常用文字屬性

這個屬性用來設定文字的對齊方式。有以下值 示例 如下 p2演示示例 這個屬性主要設定文字劃線的屬性。有以下值 示例 如下 p2演示示例 這個屬性設定文字首行縮排。其值有以下設定方法 示例 如下 p1演示示例 這個屬性設定每行之間的距離。其值有以下設定方法 示例 如下 p1演示示例 這個屬性用來設定字...