首页/CSS选择器代码/css文字纵向 css文字竖排显示 css文字纵向排列

css文字纵向 css文字竖排显示 css文字纵向排列

发布-网页培训班 | 浏览量-

有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍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> 35ui前端培训班 </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>35ui前端培训班</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>
四种方法介绍完了,究竟哪一种更适合您呢?自己比较下,根据你自己的实际情况选择吧,每种方法各有千秋。
 

css居中代码 css垂直居中代码

CSS,font-family,css如何设置字体

CSS选择器及属性优先级代码

原文地址:http://www.35ui.cn/post/20170118466.html

标签csscss文字

上一条: javascript教程 javascript入门教程基础篇
下一条: js中的子类继承父类的方法和属性

或许你还对下面的文章感兴趣