4种方法实现文字竖向排列

有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了，呵呵，其实和横排一样简单，下面介绍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>

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

4种方法实现文字竖向排列相关推荐

word里文字竖向排列（设置竖排文字）
word里文字竖向排列(设置竖排文字) 目录 word里文字竖向排列(设置竖排文字) 1.整篇的文字需要竖排,点击菜单栏中[页面布局][文字方向] 2.如果想要部分文字竖排 ,首先选中文字,点击菜单栏 ...
html 英文文字纵向排列,CSS几种简单方法实现文字竖向排版
1.一个句子的竖向排列如图: 1. 2. test .one { width: 20px; margin: 0 auto; line-height: 24 ...
前端 css实现文字竖向排列
在一些设计图中,可能会出现文字需要竖向排列的情况.以下是归纳的css方法,可以选择适合自己的那款. 方法①:直接使用css属性:writing-mode(最直接) #text{writing-mode ...
echarts X轴文字竖向排列 ,一行两字竖向排列或旋转角度排列
竖向排列 (可指定文字数量) // 此为 x 轴信息xAxis: [{type: "category",axisTick: {show: false,},splitLine: {s ...
html表格中文字竖向排列,怎样才能让表格中的字竖向居中排？
2020-02-15 word怎么竖向排列数字材料/工具:word2010 1.在使用word对文档排版时,如果要让一篇横排的文字,变成竖向直排的话,可以看以下示范,先打开一个横向显示的文档. 2. ...
两种方法实现文字阴影效果
1:使用CSS定位的方法 -使用两个相同的文本,并通过设置第二个文本的位置,并将其放在第一个文本的右下方来制造阴影效果 2:使用CSS3提供的阴影属性来设置阴影 <!DOCTYPE ...
CSS实现文字竖向排列
单列展示时 .wrap {width: 25px;line-height: 18px;height: auto;font-size: 12px;padding: 8px 5px;word-wrap: ...
[css] 实现文字竖向排列
直接使用css属性:writing-mode(最直接) #text{writing-mode:vertical-rl;// writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的 ...
网页css实现文字竖向排版的几种方法
下面介绍几种使用Css实现文字竖向排版的方法: 1.一个句子的竖向排列如图: <!DOCTYPE html> <html> <head> <title> ...

4种方法实现文字竖向排列

4种方法实现文字竖向排列相关推荐

最新文章

热门文章