css完成文本竖排实际效果示例编码

2021-03-09 04:00 jianzhan
在word、excel中能够轻轻松松的完成文本竖排的方式,可是在html网页页面中呢?现如今我有了这类必须,我要想的实际效果以下:
 

拷贝编码
编码以下:

这并不是被美工嵌在的文本,而是根据div再加的,应当怎样来完成此作用呢?
别告知我里边弄俩div,每一个div宽度与字体样式1样,1个div1列,这样也许能完成,但太低端了,并不是大家技术性迷应当追求完美的,也并不是应当倡导的。问过美工和另外一位资深(猜测)开发设计者,她们都不太清晰怎样完成。很一切正常,由于这个作用不常见到,非常少有人会关心到。我心中却确信,html+css不容易连这样的简易作用都沒有,怀着这样的信心,我刚开始了数次百度搜索搜索,发现css中的确有那末个特性是管这个的。
writing-mode特性
英语的语法:writing-mode:lr-tb或writing-mode:tb-rl
  主要参数:
  1、lr-tb:从左向右,从上往下
  2、tb-rl:从上往下,从右向左
检测编码:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
div{width:100px;height:80px;writing-mode:tb-rl;}
</style>
<title>无题目文本文档</title>
</head>
<body>
<div>大刘大刘,孤单不愁。人有女性,我有大刘。</div>
</body>
</html>

实际效果:
 
能够看到文本的确是竖排了,但总体上确是从右向左排序了,这个跟我国古人用毛笔写字相近,将会不太合乎当今人的习惯性。

在网上也有1种状况,便是仿真模拟竖排,应用ul和li目录的方式来处理。编码以下:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style type="text/css">
ul{width:100px;height:80px;overflow:hidden;list-style:none;}
ul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}
</style>
<title>无题目文本文档</title>
</head>
<body>
<ul>
<li>大刘大刘,</li>
<li>孤单不愁。</li>
<li>人有女性,</li>
<li>我有大刘。</li>
</ul>
</body>
</html>

实际效果:
 
能够看到,实际效果是1样的。但仍然是从右往左排序。如何处理这个难题呢?这个就简易了,把float:right改为float:left不就完了。请看实际效果:
 
在內外围各操纵1下边距,这个难题就获得完善处理了。