您的位置：首页 > Web前端 > CSS

CSS之writing-mode

2016-06-30 14:05 706 查看

writing-mode的原本作用

writing-mode

就是用来实现文字可以竖着呈现的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>writing-mode</title>
<style>
.div2 {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="div1">
<b>江城子</b>
<p>十年生死两茫茫，<br>不思量，<br>自难忘。<br>
千里孤坟，<br>无处话凄凉。<br> 纵使相逢应不识，<br>尘满面，<br>鬓如霜。</p>
</div>
<div class="div2">
<b>江城子</b>
<p>夜来幽梦忽还乡，<br>小轩窗，<br>正梳妆。<br>相顾无言，<br>惟有泪千行。<br>
料得年年肠断处，<br>明月夜，<br>短松冈。</p>
</div>
</body>
</html>

CSS3语法

/* 关键字值 */
writing-mode: horizontal-tb;    /* 默认值文本流是水平方向(horizontal)的，元素是从上往下(tb:top-bottom)堆叠的*/
writing-mode: vertical-rl; /*垂直方向(vertical)展示，然后阅读的顺序是从右往左(rl:right-left)*/
writing-mode: vertical-lr; /*垂直方向(vertical)展示，然后阅读的顺序还是默认的从左往右(lr:left-right)，也就是仅仅是水平变垂直*/

/* 全局值-关键字inherit IE8+，initial和unset IE13才支持 */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

英文字符横过来了，可以试试使用text-orientation:upright让其直立，IE不支持，FireFox, Chrome支持

IE8下的writing-mode我们需要关注：初始值lr-tb, tb-rl以及tb-lr，分别对应于CSS3中的horizontal-tb, vertical-rl以及vertical-lr

writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr;

如果元素是默认的水平流，则垂直margin会重叠；如果元素是垂直流，则水平margin会重叠。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>writing-mode</title>
<style>
p{
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
.div1 {
border: 1px solid goldenrod;
width: 200px;
margin: 50px;
}
.div2 {
border: 1px solid goldenrod;
width: 200px;
margin: 50px;

writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
p{
margin: 20px;
background: aqua;
}
</style>
</head>
<body>
<div class="div1">
<P>margin 20px</P>
<P>margin 20px</P>
</div>
<div class="div2">
<P>margin 20px</P>
<P>margin 20px</P>
</div>
</body>
</html>

应用1 使用text-align:center实现图片垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>writing-mode</title>
<style>
*{margin: 0;padding: 0}
p{
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
}
div {
border: 1px solid goldenrod;
width: 400px;
margin: 50px;
height: 300px;
text-align: center;
}
.div2 {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-align: center;
}
p{
margin: 20px;
background: aqua;
}
</style>
</head>
<body>
<div class="div1">
<img src="../img/11.jpg" alt="">
</div>
<div class="div2">
<img src="../img/11.jpg" alt="">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航