时间:2016-01-22 07:34 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【css实现文字竖排效果示例代码】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
css实现文字竖排效果示例代码
这不是被美工嵌在的文字，而是通过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>
关于css实现文字竖排效果示例代码的相关讨论如下：
相关问题：在css中如何让字体竖着表现
答：一、使用writing-mode属性 语法：writing-mode:lr-tb或writing-mode:tb-rl 参数： 1、lr-tb：从左向右，从上往下 2、tb-rl：从上往下，从右向左 运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。... >>详细
相关问题：CSS怎么让文字竖着排列
答：CSS让文字竖着排列,我们可以使用CSS，在需要竖向显示的地方，强制定义显示区域的宽度，这样字符会自动竖向排列：请看具体代码： 推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁，字符也容易控制。 >>详细
相关问题：哪位知道如何用css实现文字显示竖排，并且垂直居中...
答：一、原始使用writing-mode属性-不推荐 语法：writing-mode:lr-tb或writing-mode:tb-rl参数：1、lr-tb：从左向右，从上往下2、tb-rl：从上往下，从右向左运行代码发现，IE显示正常，火狐、谷歌浏览器却不支持，所以不建议使用writing-mode属性。 ... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-