css实现文字竖排效果示例代码
发布时间：2013-10-16 17:36:50 作者：佚名 
我要评论
我要评论在word、excel中可以轻松的实现文字竖排的形式，但是在html页面中呢？当然也可以实现，下面有个不错的示例，大家可以参考学习下
在word、excel中可以轻松的实现文字竖排的形式，但是在html页面中呢？现今我有了这种需要，我想要的效果如下：
这不是被美工嵌在的文字，而是通过div加上的，该当如何来实现此功能呢？
别告诉我里面弄俩div，每个div宽度与字体一样，一个div一列，这样或许能实现，但太低端了，不是我们技术迷应该追求的，也不是应该提倡的。问过美工和另一位资深（猜想）开发者，他们都不太清楚如何实现。很正常，因为这个功能不常用到，很少有人会关注到。我心中却坚信，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>
效果：
可以看到文字确实是竖排了，但整体上却是从右向左排列了，这个跟中国古人用毛笔写字类似，可能不太符合当代人的习惯。
网上还有一种情况，就是模拟竖排，使用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>
效果：
可以看到，效果是一样的。但依然是从右往左排列。怎么解决这个问题呢？这个就简单了，把float：right改成float：left不就完了。请看效果：
在内外围各控制一下边距，这个问题就得到完美解决了。
复制代码
代码如下:这不是被美工嵌在的文字，而是通过div加上的，该当如何来实现此功能呢？
别告诉我里面弄俩div，每个div宽度与字体一样，一个div一列，这样或许能实现，但太低端了，不是我们技术迷应该追求的，也不是应该提倡的。问过美工和另一位资深（猜想）开发者，他们都不太清楚如何实现。很正常，因为这个功能不常用到，很少有人会关注到。我心中却坚信，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>
效果：
可以看到文字确实是竖排了，但整体上却是从右向左排列了，这个跟中国古人用毛笔写字类似，可能不太符合当代人的习惯。
网上还有一种情况，就是模拟竖排，使用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>
效果：
可以看到，效果是一样的。但依然是从右往左排列。怎么解决这个问题呢？这个就简单了，把float：right改成float：left不就完了。请看效果：
在内外围各控制一下边距，这个问题就得到完美解决了。
相关文章
本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋友跟随小编一起看看吧2025-06-20- 本文给大家讲解CSS 的三种核心布局机制——普通流(Normal Flow)、浮动(Float)和定位(Positioning)对于创建灵活、响应式的网页至关重要,本文将深入探讨这三种机制的工作原2025-06-19
文章介绍如何用CSS实现角标效果,通过.active类结合::after和::before伪元素,利用定位、边框和旋转创建红色边框与白色三角形的提示标志,适用于按钮或卡片元素的视觉增强设计2025-06-19CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)
CSS Anchor Positioning是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持需启用实验 flag,它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比
CSS 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关系,以下是 static、relative、absolute、fixed、sticky 的详细对比和应用2025-06-17CSS place-items: center解析与用法详解
place-items: center; 是一个强大的 CSS 简写属性，用于同时控制 网格(Grid) 和 弹性盒(Flexbox) 布局中的对齐方式，本文给大家介绍CSS place-items: center； 详解与用法2025-06-17
在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧2025-06-17- CSS单位区别与使用场景总结：px绝对、vw/vh响应式,%继承父尺寸,em/rem文字缩放,vmin/vmax适应宽高变化,固定布局用px或%,响应式布局用vw/vh/rem,文字用em或rem，本文给大家2025-06-16
- 这篇文章主要介绍了CSS 样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2025-05-21
- 在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具，本文介绍CSS基础中padding，通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元2025-05-16
最新评论