CSS建立豎排文字的簡單方法小結

2022-09-25 13:03:09 字數 1971 閱讀 2605

下面是由我翻譯自nettuts+的文章,希望這幾種方法能夠給你帶來一些提示。

方法一:

標籤 一種可能的方法(但不推薦)是在每個字母後面新增

標籤來實現豎排文字:

複製**

**如下:

程式設計客棧;script language="j**ascript">ffcod = delpost.runcode9 .value; ffcod = ffcod.replace(/

/g,''); delpost.runcode9 .value = ffcod; 提示:您可以先修改部分**再執行

千萬不要使用使用這種方法,它是跛腳和草率的。

方法二:靜態包裹

通過這個方法,我們將每個字母包裹在乙個span中,然後在css中設定它的display屬性為block

提示:您可以先修改部分**再執行

這種方法的問題是,除了可怕的標籤外,它需要你手工去給每個字母用span括起來。如果這些文字是由cms動態生成的,那就別用這種方法了。

方法三:使用j**ascript

我最初的想法是用j**ascript動態地新增span標籤,這樣我們就避開了方法二遇到的問題。

提示:您可以先修改部分**再執行

這個方法絕對是乙個進步。以上方法中,我們將一行文字(nettuts)分拆放到乙個陣列中,並且將每個字母用span標籤括起來。雖然我們可以用如for語句或$.map來篩選這個陣列,但是更好更快的方法是手動地同時將文字插入和括起來。雖然相比方法二,這種方法更好,但是仍然不推薦此方法:

在j**ascript被禁用的情況下會破壞你的布局

理想的情況下,如果可能的話,我們應該使用css來完成這個任務。

方法四:給容器指定乙個寬度

如果可能的話,還是讓我們遠離j**ascript吧。如果我們給容器元素指定乙個寬度,並強迫文字換行,如何?那是可以的。

提示:您可以先修改部分**再執行

在這個方法中,我們給h1定義很窄的寬度,然後是其文字的寬度等於外圍的寬度,最後設定word-mzdnteycmwrap 等於 break-word,這樣我們就可以強制每個字母單獨在一行。不過需要注意的是, break-word是乙個css3的屬性,並不是所有瀏覽器都相容。如果排除舊瀏覽器的話,這個問題貌似就可以解決了。。。但並完全是!上面的演示確實可以正常工作,但是玩畫素值是很危險的,不信可以看看 將大寫字母轉換成小寫字母的後果(在ie下看看):

所以,使用這種方法,當你給h1指定具體畫素寬度的時候,要特別小心。這種方法也不推薦!

方法五:使用 letter-spacing

作為預防措施,並擴充套件方法四,我們為什麼不申請相當大的letter-spacing來解決這個問題?

提示:您可以先修改部分**再執行

這似乎解決了這個問題,但是在這裡,我們又使用了一些css3的屬性。

方法六:使用 ems

另外,還有乙個一行內的解決方法。不知道你有沒有記得,當給父級元素指定 overflow: hidden 的時候,父元素就會擴充套件以包含浮動? 這個方法就類似這個,關鍵是使用了 em,並給每個字母之間新增了空格。

提示:您可以先修改部分**再執行

漂亮又整潔,對不對?並且,這種方法可以給你的文字指定任意的font-size,因為我們使用了em,它就相當於選擇字型的x-height,給我們提供了更多的靈活性。

但是,你是否又一次想起,有時一行中會有不止乙個字母。可實際情況是,你可以安全使用這種方法,因為我已經指定了乙個相當大的letter-spacing,以確保一行只會有乙個字母。

到目前為止,據我所知,這是最好的跨瀏覽器相容的解決方案。

方法七:whitespace

最後乙個方法來達到這種效果是使用 white-space屬性。

提示:您可以先修改部分**再執行

通過設定 white-space 的值為 pre,即可控制文字的排版就像在乙個 pre 標籤中一樣。因此,它會嚴程式設計客棧格地顯示你新增的空格。

本文標題: css建立豎排文字的簡單方法小結

本文位址:

VC中實現文字豎排的簡單方法

好多人都覺得在vc中實現文字豎排是一件很難的事情,其實可以使用 躺 著的字型很方便的實現文字豎排。windows中有一些字型是 躺 著的,例如 fixedsys system 宋體 黑體等等,有很多,這些字型和不加 的字型的唯一區別就是用這些字型顯示的文字是 躺 著的。如下圖 對這些 躺 著的字型進...

VC中實現文字豎排的簡單方法 推薦

好多人都覺得在vc中實現文字豎排是一件很難的事情,其實可以使用 躺 著的字型很方便的實現文字豎排。windows中有一些字型是 躺 著的,例如 fixedsys system 宋體 黑體等等,有很多,這些字型和不加 的字型的唯一區別就是用這些字型顯示的文字是 躺 著的。如下圖 對這些 躺 著的字型進...

css清除浮動的幾種簡單方法

在頁面的布局和排版中,難免會遇到需要新增浮動和清除浮動的情況,如果不清楚浮動很有可能會造成頁面布局塌陷,那麼如何清除浮動呢,下邊我就來介紹幾個簡單的方法,親測有效。方法一 給父級新增固定的高。例如 用法 適合高度固定的布局,給出明確的高度。方法二 在浮動結束後加上div標籤,新增樣式 clear b...