文章專題學習下載問答程式設計字典遊戲最近更新

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

首頁 > web前端 > html教學 > 主體

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

WBOY

發布： 2016-06-24 11:37:06

原創

1902 人瀏覽過

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>

登入後複製

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

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

所属网站是:div css教程。

相關標籤：

css实现文字竖排效果

來源：php.cn

上一篇：href="#portlet_tab3"_html/css_WEB-ITnose 下一篇：transition的四个属性_html/css_WEB-ITnose

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章