有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了，呵呵，其实和横排一样简单，下面介绍4种方法来实现CSS文字竖排。

第一种方法：将需要竖排显示的字符放在span中，在CSS中设置span的display属性为block，不过不推荐使用这种方法，因为有些麻烦，代码如下：

h1 span { display: block; }

第二种方法A：同样使用CSS，在需要竖向显示的地方，强制定义显示区域的宽度，这样字符会自动竖向排列：请看具体代码：

html>

Vertical Text

h1 {

width: 50px;

font-size: 50px;

word-wrap: break-word;

}

NETTUTS

第二种方法B：同样是使用CSS，推荐使用这种方法，觉得这个方法兼容性也好，而且代码简洁，字符也容易控制。

html>

竖向排列的文字

h1 {

width: 50px;

font-size: 50px;

word-wrap: break-word;

letter-spacing: 20px;

}

我爱北京天安门

第三种方法：使用JavaScript(不推荐，其实这么一个小小的功能，动用JS就太不划算了，毕竟我们有比这更有效、更简洁的办法)

html>

Vertical Text

h1 span { display: block; }

NETTUTS

var h1 = document.getElementsByTagName(‘h1′)[0];

h1.innerHTML = ‘’ + h1.innerHTML.split(”).join(‘’) + ‘’;

flex 文字竖排_4种CSS文字竖排方法相关推荐

4种CSS文字竖排方法
4种CSS文字竖排方法,有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排 ...
html字体竖排上下间距,css文字竖排显示文字垂直布局
div css文字竖排 CSS文字竖立显示.CSS文字从上到下垂直显示.CSS文字垂直排版布局篇在CSS中CSS样式属性writing-mode:tb-rl是设置文字垂直显示竖排的,但是不兼容浏览器 ...
16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
div css将文字居中显示图片,css文字居中、图片居中、div居中解决方案
一.文字居中若文字只有一行文本只有一行 .box { width: 200px; height: 200px; background-color: red; } .text { line-heig ...
html给文字添加阴影效果,text-shadow css文字阴影_字体投影属性样式
text-shadow为css文字阴影.css字体投影与字体阴影含胡效用效果的CSS属性单词 css text-shadow阴影功效一.text-shadow先容 text-shadow是CSS格局 ...
html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
table表头固定4种方法_4种细砂回收的方法分析
在整条制砂生产线合理又环保的配置方法中,配备脉冲除尘器和水洗洗砂机是流行趋势.经洗砂机清洗过的砂子表面洁净,有良好的质感,同时也能减少生产过程中的粉尘和噪音污染.但在洗砂过程中,细砂和面砂会随着水的流 ...
css文字与省略号重叠,CSS 文字溢出处添加省略号(示例代码)
兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的 ...
html文字竖直书写,css 文字竖直居中的写法和图片垂直居中代码(图文)
界面上文章左右居中使用text-aligin:center,上下竖直居中的写法如下, 图片垂直居中的代码文字.图片居中显示的方法 .content{ height: 40px; line-heigh ...
html文字超出不换行,css文字超出不换行如何设置？
white-space,英语词组意思为空余时间,在计算机术语中的意思是泛空格符.white-space 属性设置如何处理元素内的空白. css可以使用white-space属性设置超出不换行. whi ...

flex 文字竖排_4种CSS文字竖排方法

NETTUTS

我爱北京天安门

NETTUTS

flex 文字竖排_4种CSS文字竖排方法相关推荐

最新文章

热门文章