在网页上如何实现文字竖排

在css中，我们的文字排版通常都是从左向右，从上往下。那么，如果我们要实现页面文字竖排，应该怎样设置呢？为了解决这个问题，下面课课家网站将为大家介绍实现文字竖排的方法，有兴趣的朋友不妨参考一下。

　　一、writing-mode语法

　　要实现页面文字竖排，我们需要使用writing-mode属性，下面我们一起来了解一下它的语法：

语法：writing-mode:lr-tb、tb-rl

　　参数：lr-tb：从左向右，从上往下；tb-rl：从上往下，从右向左

　　具体写法如下

　　writing-mode: horizontal-tb; /* 默认值 */

　　writing-mode: vertical-rl;

　　writing-mode: vertical-lr;

　　这里再介绍一种IE私有的写法：

　　writing-mode: inherit;

　　writing-mode: initial;

　　writing-mode: unset;

　　注意：关键字inherit IE8+支持，initial和unset IE13才支持

　　lr-tb : 默认值。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。所有的字形都是竖直向上的。这种布局是罗马语系使用的。

　　tb-rl : 上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的。

　　一些说明：

　　1.相同的writing-mode属性值并不会累加，例如父子均设置了writing-mode:tb-rl，只会渲染一次，子元素并不会2次“旋转”。

　　2.IE浏览器下，一个自身具有布局的元素（不是纯文本之类元素）如果writing-mode属性值和父元素不同，当子元素的布局流变化的时候，其父元素坐标系统的可用空间会被充分利用。

　　3.Chrome浏览器下目前还需要-webkit-私有前缀，虽然Chrome和Opera认识tb-rl等老的IE属性值，但是，仅仅是认识而已，根本没有任何效果。

　　二、writing-mode的用法

　　前面说了这么多理论的东西,大家可能比较难理解.下面我们以一首古诗词作为例子来展示这个writing-mode的用法。Letgo!

　　CSS代码

　　.verticle-mode{

　　writing-mode:tb-rl;

　　-webkit-writing-mode:vertical-rl;

　　writing-mode:vertical-rl;}/*IE7比较弱，需要做点额外的动作*/.verticle-mode{

　　*width:120px;}.verticle-modeh4,.verticle-modep{

　　*display:inline;

　　*writing-mode:tb-rl;}.verticle-modeh4{

　　*float:right;}

　　html代码

　　<h4>咏柳</h4><p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>

　　<divclass="verticle-mode">

　　<p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p></div>

如果你正在设计一个介绍书法或者古代文学的网站，你大概会通过各种古色古香的背景来对网站进行润色，但可能你会为模拟古代的竖排文本而苦恼，最后不得不使用图片来完成任务。这时候，writing-mode属性就能帮到你了。而且竖排文本也适用于一些创意性的设计当中，所以记住该属性对大家日后的开发会很有帮助的喔！

最近在学习中总结到的知识希望对大家有帮助

在网页上如何实现文字竖排相关推荐

无法在C语言软件里敲字,网页上不能输入文字怎么办
今天有网友向我们来信反映说电脑开机后,打开浏览器发现自己网页上不能输入文字怎么办.换了几个浏览器还是一样的情况,查不出病毒和插件.下面一起来看看电脑工程师是怎么解决吧! 网页上无法输入字解决方法:( ...
一键读图OCR 轻松搞定任意网页上出现的文字提取
谷歌Chrome浏览器有个插件:一键读图OCR 用谷歌浏览器打开以下链接,点击添加扩展, 直接安装即可. https://chrome.google.com/webstore/detail/%E4 ...
怎么愉快的复制网页上不能复制文字的方法
网上的办法有很多,大部分是使用上的漏洞,但是我们作为技术人员那么去弄就太LOW了,接下来从修改代码的角度去过掉,很简单: 这里以百度文库为例子,毕竟百度文库真的是XX: 第一步: ctrl+s保存: ...
html文字自动消失了,为什么从网页上复制的文字到word上一修改后面的字就自动消失了...
word打字时后面的字会消失是什么原因?如何解决?出现这种问题多半是发生设置错误或误触键盘某些键导致的,由于插入键与退格键距离非常的接近,于是,误触插入键是最常导致这种问题.而导致word打字后面的字 ...
运用JavaScript实现网页上图片与文字的放大与缩小
2019独角兽企业重金招聘Python工程师标准>>> 部分具体代码如下: <script type="text/javascript"> var ...
复制网页上无法选中的文字
如果你是一个热爱生活.旅游.音乐或者游戏,但是却web一无所知,那么有时候你就会遇到一种情况就是,在网页上有一段文字,但是你却复制不了.就像一个相爱的人但却无法触及的感觉. 比如朋友有某狗上给我推荐了 ...
在vue项目或网页上实现文字转换成语音
** 在vue项目或网页上简单实现文字转换成语音播放 ** 一.在网页上实现文字转换成语音方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为 ...
4种CSS文字竖排方法
4种CSS文字竖排方法,有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排 ...
python文字教程-Python 爬虫零基础教程(3):输出一个网页上的文字
效果图: 代码: # -*- coding: utf-8 -*- # Filename:print_text.py # 输出网页上的文字 import re import requests user_ ...
获取网页上数据（图片、文字、视频）－b
Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... . ...

在网页上如何实现文字竖排

在网页上如何实现文字竖排相关推荐

最新文章

热门文章