4种方法实现文字竖向排列
来源:互联网 发布:四川省网络作家协会 编辑:程序博客网 时间:2024/06/09 11:29
有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。
第一种方法:将需要竖排显示的字符放在span中,在CSS中设置span的display属性为block,不过不推荐使用这种方法,因为有些麻烦,代码如下:
h1 span { display: block; }
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
第二种方法A:同样使用CSS,在需要竖向显示的地方,强制定义显示区域的宽度,这样字符会自动竖向排列:请看具体代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1> NETTUTS </h1>
</body>
</html>
第二种方法B:同样是使用CSS,推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁,字符也容易控制。
<!DOCTYPE html>
<html>
<head>
<title>竖向排列的文字</title>
<style>
h1 {
width: 50px;
font-size: 50px;
word-wrap: break-word;
letter-spacing: 20px;
}
</style>
</head>
<body>
<h1>我爱北京天安门</h1>
</body>
</html>
第三种方法:使用JavaScript(不推荐,其实这么一个小小的功能,动用JS就太不划算了,毕竟我们有比这更有效、更简洁的办法)
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> NETTUTS </h1>
<script>
var h1 = document.getElementsByTagName(‘h1′)[0];
h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’;
</script>
</body>
</html>
四种方法介绍完了,究竟哪一种更适合您呢?自己比较下,根据你自己的实际情况选择吧,每种方法各有千秋。
阅读全文
0 0
- 4种方法实现文字竖向排列
- 竖向排列文字
- CSS几种简单方法实现文字竖向排版
- CSS几种简单方法实现文字竖向排版
- Flex3+ArcGIS+API实现Button控件文字竖向排列
- 让CDC输出文字的时候让文字竖向排列
- CSS自动竖向排列的布局方法
- CSS实现文字竖向排版以及双实线的实现
- IFIX 4.0 竖向文字
- 竖向显示标签中的文字
- Web报表单元格内容竖向显示的实现方法
- 使用writing-mode让文字竖向排版
- POI导出excel,设置竖向文字
- 两种方法实现文字的移动
- 两种方法实现文字阴影效果
- android竖向进度条简单实现
- 全排列的实现方法
- VC中工具栏按钮文字及左右排列设置方法
- CentOS 设置mysql的远程访问
- WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置
- 实现倒计时功能--函数的局部变量问题
- SQL概述
- HDU 6120 All Kill(数论+FFT+莫比乌斯反演)
- 4种方法实现文字竖向排列
- 剑指offer——对称的二叉树
- 插件化开发系列之三---Android插件化从入门到放弃-最强合集
- PHP-cli 日志彩色玩法 echo "\033[1;33m Hello World. \033[0m \n";
- hdu-1532-Drainage Ditches-Dinic算法-java
- matlab求解最短路径
- 常用的评测指标
- 多态
- hdu6127 (多校联合第七场) 几何 枚举