Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

css实现文字竖排效果_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:37:06

Original

1858 people have browsed it

css实现文字竖排效果:
在当前大家都习惯于横向排列的文本，但是绝大多数朋友也是知道的，在古代中国的文本是竖向排列的，本章节通过代码实例介绍一下如何实现文本的竖向排列效果，这样的需求在实际应用中也是有的。
代码如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">#webfx{  position:absolute;  background:red;  top:50px;  right:100px;  width:100px;  writing-mode:tb-rl;    -webkit-writing-mode:vertical-rl;}</style></head><body><div id=webfx>蚂蚁部落欢迎您</div></body>  </html>

Copy after login

上面的代码实现了文本竖排效果，不过存在着较大的兼容性问题。
兼容所有浏览器的竖排效果可以参阅CSS如何实现文字竖排效果一章节。

原文地址是:css实现文字竖排效果一章节。

所属网站是:div css教程。

Related labels：

css实现文字竖排效果

source：php.cn

Previous article：href="#portlet_tab3"_html/css_WEB-ITnose Next article：transition的四个属性_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn