Home > Web Front-end > HTML Tutorial > css实现文字竖排效果_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:37:06
Original
1943 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:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template