CSS中的文字屬性

來源:互聯網
上載者:User

本文總結一下CSS中關於文字的相關屬性,最後給出執行個體。

CSS基礎文字屬性

文字的基礎屬性主要包括:字型、顏色和文本。除去顏色color的屬性外,字型和文本的相關屬性可以權威參考:
CSS 文字屬性(Text)
CSS 字型屬性(Font)

CSS3新增屬性

  • 文本陰影:text-shadow
  • 文本溢出:text-overflow
    這個屬性一般需要配合overflow:hiddenwhite-spance:nowrap(強制文本容器不換行)使用。
  • 文本換行:word-wrapword-break
    這裡有兩個設定有點類似,都是對長單詞或網址、數字之類的字串在到達右邊界時進行斷行。區別是:word-wrap:break-word會首先嘗試將長字串移入下一行,如果仍然顯示不下,就切斷分割;而word-break:break-all則會直接進行切割。
    程式碼範例

    另外,屬性white-space也對文本換行有影響,當其為nowrap時會強制不換行。

實際應用

利用文本溢出的text-overflow屬性,可以對列表的文本展示進行設定,
即充分利用空間又保證樣式美觀,詳見程式碼範例

文本設定tips

儲存格td自動換行:

table {    table-layout:fixed; //列寬由表格寬度和列寬度設定。    width:**px;}table td{    overflow:hidden;    word-wrap:break-word;}

文本的垂直置中vertical-align:
這個問題也許大家經常碰到,我就不詳說具體解決方案了,可以參考這兩篇文章我對CSS vertical-align的一些理解與認識和未知高度多行文本垂直置中。只說一下要點,vertical-align設定時一定要有參照點,而且vertical-align只在inline-block的容器內有效,區塊層級元素容器設定vertical-align是不起作用的。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。