吴江网站设计,logo设计理念简短范文,修改wordpress主体字体,zencart网站打不开2019独角兽企业重金招聘Python工程师标准 有时候#xff0c;我们需要对网页某个区域的文字竖排#xff0c;竖向排列#xff0c;横向的当然大家都见惯了#xff0c;对于竖排#xff0c;一时间找不到思路了#xff0c;呵呵#xff0c;其实和横排一样简单 有时候我们需要对网页某个区域的文字竖排竖向排列横向的当然大家都见惯了对于竖排一时间找不到思路了呵呵其实和横排一样简单下面介绍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 charsetutf-8 /
titleVertical 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 charsetutf-8 /
titleVertical 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(‘/spanspan’) ‘/span’;
/script
/body
/html 转载于:https://my.oschina.net/jack088/blog/612939
