css屬性讓網頁文字實現豎排的幾種方法

2022-09-25 10:27:08 字數 1407 閱讀 4986

以下幾種都是用樣式style裡的屬性

1.layout-flow : horizontal | vertical-ideographic

引數:

horizontal :  物件中的內容自左邊流入。下一行在前一行下面。這個值適於拉丁語系

vertical-ideographic :  物件中的內容自上而下流入,下一行在前一行左面。這個值適於亞洲語系在製作網頁的時候我覺得用這個比較好,

2.word-break : normal | break-all | keep-all

用 k程式設計客棧eep-all 他可以不讓蒙文在排不滿的時候斷字,但是下行不怎麼整齊。

引數:

normal :  依照亞洲語言和非亞洲語言的文字規則,允許在字內換行

break-all :  該行為與亞洲語言的normal相同。也允許非亞洲語言文字takwkbrqc行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字 keep-all :  與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字。

3.style裡的 position:absolute;filter:progid:dximagetransform.microsoft.basicimage(rotation=1); 屬性也可以讓文字豎排。

這裡提供2類3種解決辦法

1:使用flash+xml實現。

將內容放到xml內,在flash內讀取並載入到設定好的場景中。text設定文字方向。

2:使用html頁面內swf字尾實現。

例:<param name="movie" value="index.swf?name=文字內容"/>

其他基本上與第乙個一樣。

as3獲取位址swf後的引數問題

3:給p定寬定高來實現文字豎排。(漢字哦)

首先確認單位,使用em,設定p的高,假設為20em,那麼一列就是20個字元。

css

引用 複製**

**如下:

#content/*text-align表示文字起始方向,左或右。*/

#content p

html

引用 複製**

**如下:

<div id="content">

<p>內程式設計客棧容在這裡</p>

<p>內容在這裡</p>

<p>內容在這裡</p>

</div>

這樣的話,content內不能有,開始有個<p>,結束有個</p>,然後使用js找到第20、40、60、80...個字,在後邊加</p><p>,碰到br也替換成</p>www.cppcns.com<p>

這個替換好像很熟悉,哦,在這裡讓使用者更好的編輯文字

本文標題: css屬性讓網頁文字實現豎排的幾種方法

本文位址:

用CSS讓網頁文字豎排

1.writing mode 設定物件書寫方向 語法 writing mode lr tb tb rl 引數 lr tb 從左向右,從上往下 tb rl 從上往下,從右向左 示例 div 2.text align 設定物件中文字的對齊方式 語法 text align left right cente...

Css實現文字豎排效果

css實現文字豎排效果 詞曰 滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空 青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢 古今多少事,都付笑談中。話說天下大勢 分久必合,合久必分 週末七國分爭,併入於秦。及秦滅之後,楚 漢分爭,又併入於漢。漢朝自高祖斬白蛇而起義,一統天下。後...

網頁文字豎排的幾種實現方式

古時候的書籍裡面文字的書寫方式都是從上到下從右向左書寫的,我們可不可以在網頁上實現這種文字排版效果,雖然現在豎排在網頁上用的比較的少,但是我們可以在我們自己的個人 或者部落格介紹頁面用豎排來排版,使網頁樣式看起來更加的豐富和復古!通過一些嘗試我找到了如下3中方式在網頁上豎排文字的方法,各有各的缺點和...