CSS自定義製表符 TAB 寬度

2021-09-30 09:55:29 字數 1036 閱讀 7792

製表符常用來表示**縮排,製表符的寬度的設定,對於任何一款**編輯器來說都是很必須的功能。

在瀏覽器中展示**的時候,通常我們只能將tab替換為4個空格來顯示,因為預設的tab太寬了。

w3c的css3草案中已有關於tab寬度的設定,在這裡。

高興的是,firefox4和opera10已經支援了,其它瀏覽器當前最新版仍然不支援。

(firefox現在發布到版本9了,可見其對w3c標準支援度的領先,別看chrome版本好變的老快,其實對標準的支援很殘。)

要用到的css屬性叫做 tab-size,可以賦值為乙個整數,表示tab寬度為多少個字元,預設是8。

w3c草案定義是這樣的:

name:

tab-size

value:

| initial:

8block containers

inherited:

yespercentages:

n/amedia:

visual

computed value:

specified value

this property determines the measure of the tab character (u+0009) when rendered. integers represent the measure in space characters (u+0020). negative integers are not allowed.

示例:

abcdefgh

tab test

12345678

對於不支援tab-size的瀏覽器,只能用font-size來影響tab寬度,麻煩一點了:

abcdefgh **

tab test

12345678

原理就是在pre上的font-size決定tab寬度,pre裡面的文字用額外的font-size樣式來確定字型大小。

對於textarea,如果瀏覽器不支援tab-size,暫時還沒辦法。

製表符(tab 鍵)的概念

今天寫了一段簡單的 只有兩條語句,但輸出的結果卻讓我很迷惑。下面是 string s this tis tmy tsmall texample tstring twhich ti m tgoing tto tuse tfor tpattern tmatching.system.out.println...

自定義tab 模擬tab效果

實現效果 html模板 任務名稱 任務狀態 下次匯報時間 是否逾期 逾期天數 測試任務 進行中2019 04 25否0 測試任務2 進行中2019 04 25否0 內容二內容三 內容四主要的js var lis document.queryselectorall tab header li 查詢到所...

自定義結構 Tab切換

前言 在搭建頁面的時候,可能會需要多塊區域進行tab切換,這時候需要規範化封裝乙個結構,只需要一段js,可重複且多處使用 1 tab樣式 3 html結構 hover box hover change active 公告 li 決定 li 會議 li ul hover content style d...