Css实现文字竖排效果

转载 2006年05月17日 10:53:00

Css实现文字竖排效果

Chinese Font Demo

Firefox 1.5+

-moz-column-width:1em; -moz-column-gap:1em;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

direction: rtl; -moz-column-width:1em; -moz-column-gap:1em;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

direction: rtl; -moz-column-width:1em; -moz-column-gap:1em; height: 20em;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

IE

font-family: @MingLiu; writing-mode: tb-rl;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

font-family: @MingLiu; writing-mode: tb-rl; direction: rtl;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

font-family: @MingLiu; writing-mode: tb-rl; layout-grid-char: auto;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

font-family: @MingLiu; writing-mode: tb-rl; layout-grid-char: 1em;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

font-family: @MingLiu; layout-flow: vertical-ideographic;

詞曰:

滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空:青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢:古今多少事,都付笑談中。

話說天下大勢.分久必合,合久必分:周末七國分爭,并入於秦。及秦滅之後,楚、漢分爭,又并入於漢。漢朝自高祖斬白蛇而起義,一統天下。後來光武中興,傳至獻帝,遂分為三國。推其致亂之由,殆始於桓、靈二帝。桓帝禁錮善類,崇信宦官。及桓帝崩,靈帝即位,大將軍竇武、太傅陳蕃,共相輔佐。時有宦官曹節等弄權,竇武、陳蕃謀誅之,作事不密,反為所害。中涓自此愈橫。

建寧二年四月望日,帝御溫德殿。方陞座,殿角狂風驟起,只見一條大青蛇,從梁上飛將下來,蟠於椅上。帝驚倒,左右急救入宮,百官俱奔避。須臾,蛇不見了。忽然大雷大雨,加以冰雹,落到半夜方止,壞卻房屋無數。建寧四年二月,洛陽地震;又海水泛溢,沿海居民,盡被大浪捲入海中。光和元年,雌雞化雄。六月朔,黑氣十餘丈,飛入溫德殿中。秋七月,有虹見於玉堂;五原山岸,盡皆崩裂。種種不祥,非止一端。

CSS几种简单方法实现文字竖向排版

1.一个句子的竖向排列 如图: 1.                      2.  test .one { width: 20px; margin: 0 auto; lin...
  • sangjinchao
  • sangjinchao
  • 2017年03月03日 14:29
  • 20380

css中的文字竖排和间距控制

css中的文字竖排和间距控制
  • f328310543
  • f328310543
  • 2014年12月08日 11:33
  • 6266

4种CSS文字竖排方法

4种CSS文字竖排方法,有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。 ...
  • axl19530209
  • axl19530209
  • 2015年02月05日 09:02
  • 3941

CSS入门之文本样式用法(文本对齐,首行缩进,文本竖排,文字方向)

文本对齐有4种: 1.text-align:left 2.text-align:right 3.text-align:center 4.text-align:justify 首行缩进:text-ind...
  • u011333814
  • u011333814
  • 2014年01月27日 00:06
  • 2342

css实现文字竖排效果

在word、excel中可以轻松的实现文字竖排的形式,但是在html页面中呢?现今我有了这种需要,我想要的效果如下: 这不是被美工嵌在的文字,而是通过div加上的,该当如何来实现此功能呢? 别告诉我...
  • xinfei0803
  • xinfei0803
  • 2013年10月16日 16:00
  • 1089

使用CSS实现文字的竖排

有时我们需要一段文字进行从上到下竖列排版,我们知道css样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃。 一、原始使用writing-mode属性-不推荐  语法:writin...
  • wuyou1336
  • wuyou1336
  • 2016年11月30日 21:38
  • 359

CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果

利用text-shadow属性的特性,同时在上,下,左,右中个方向为文字设置多个阴影,且不设置模糊作用距离(即默认没有模糊效果),就可以实现文本的描边效果了。 文本的描边效果 p{ pad...
  • Cryhelyxx
  • Cryhelyxx
  • 2013年10月30日 14:06
  • 9624

Python 让美文竖排显示-高大上

python 让文字竖排显示看起来高大上,主要练习python 循环,函数已经2维排列的处理...
  • yezibang
  • yezibang
  • 2015年08月01日 15:35
  • 610

使用javascript和css来实现textbox水印效果

Introduction In this article, I will explain how watermark textbox using JavaScript and CSS is ve...
  • aiouwen521
  • aiouwen521
  • 2013年01月22日 15:38
  • 1951

html 文字竖排效果

废话不多说,看效果; 实例一: 实现这样的效果: 文字是 从上而下,从左向右。显示 属性: -webkit-writing-mode:vertical-rl; writing-mod...
  • csdn_chenli
  • csdn_chenli
  • 2016年07月14日 17:35
  • 2816
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Css实现文字竖排效果
举报原因:
原因补充:

(最多只允许输入30个字)