零基础建站培训介绍

当前位置:

CSS怎么控制文字竖着排列

有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。(如果你对代码不懂,可以先学习一下HTML入门教程

第一种方法:将需要竖排显示的字符放在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>

第二种方法:同样使用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>

第三种方法:同样是使用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>

四种方法介绍完了,究竟哪一种更适合您呢?自己比较下,根据你自己的实际情况选择吧,每种方法各有千秋。

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度和高度呢?(相关
  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向
  • HTML <font>标签之html文字字体、html字体颜色、html字体大小设置标签元素一、font标签语法与结构[cce_html]<font color="#FF0000"&
  • 有时候,我们需要对网页某个区域的文字竖排,竖向排列。横向排列,在网站制作培训中,经常用到。对于竖排,一时间找不到思路了,呵呵,其实和横排一样
  • 如何在网页文字后加水平线?在HTML中,定义水平线可以使用水平线标签HR标签来写一个水平线。基本写法:[cce_html]<hr />[/cce_html]并且
  • 图片上的文字如何用ps除去呢?下面小编向大家分享一个比较简单的方法,主要运用ps中的移动工具。不过该方法对于纯色背景的文字比较好用,而处理那些复