CSS 使文字纵向排列的七种方

下面分享一下使文字纵排列的几种方法：

第一种方法：”<br>”标签

这种方法没有说服力，不推荐使用；

第二种方法：Static Wrapping

h1 span{ display:block;}

这种方法的弊端是，需要手工录入标签；

第三种方法：用Javascript

h1 span{ display:block;}

<h1>NETTUTS</h1>

var h1=document.getElementsByTagName('h1')[0];
h1.innerHTML='<span>'+h1.innerHTML.split('').join('</span><span>')+'</span>';

此种方法与第二种方法原理是一样的，好处是用js代替手工添加span标签。尽管如此，还是有一些弊端：
a、当js失效的时候，会影响页面布局；
b、当然完美的解决方法是，尽可能用css;

第四种方法：给Container定个宽度

h1{
width:20px;
font-size:20px;
word-wrap:break-word;
}

<h1>NETTUTS</h1>
 
<h1>Nettuts</h1>

word-wrap:break-word的一部分是CSS3规格,并不是在所有的浏览器兼容。
如果把除第一个字母外的其它字母小写的话，就有点悲剧了，套用别人的一句话就是”it’s too risky to play with pixel values.”；

第五种方法:使用letter-spacing

h1{
  width:50px;
  font-size:50px;
word-wrap:break-word;
  letter-spacing:20px;/* Set large letter-spacing as precaution */
}

<h1>NETTUTS</h1>
<h1>Nettuts</h1>

这种方法貌似很好，不过有用到一点css3了

第六种方法:使用emS

h1 {
  width: 1em;
  font-size: 40px;
  letter-spacing: 40px; /* arbitrary large letter-spacing for safety */
  background:#CCC;
  }

据我所知,到目前为止,这是最好的,最符合跨浏览器的解决方案。

第七种方法:Whitespace

h1 {
white-space:pre;
}

不爽的是，我们需要在编辑里所文字纵向排列；

拓展：纵向排列解决了，可否做到垂直居中呢？拭目以待！

CSS 使文字纵向排列的七种方相关推荐

android ios语音转码,手机如何将语音转文字？这几种方法真简单，安卓苹果通用...
原标题:手机如何将语音转文字?这几种方法真简单,安卓苹果通用手机可以将语音转文字吗? 当然可以啦,方法还不止一种,下面就简单给大家介绍几种,安卓苹果手机通用的方法吧. 1.输入法-实时语音转文字手 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
通过CSS实现文字渐变色的两种方式
说明这次的重点就在于两个属性, background 属性 mask 属性这两个属性分别是两种实现方式的关键. 解释方式一效果图代码 <!DOCTYPE html> < ...
html/css使文字图片div在整个网页上居中（水平居中+垂直居中）transform属性配置
在使用html/css编写网页时,有时需要让一段文字或图片等在整个网页居中,即既是水平居中又是垂直居中,而单单使用 text-align:center 只是让文字在水平上居中,而无法在垂直方向上也居中 ...
html如何让字体自动变色,CSS使文字部分变色
思路思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍.这里就需要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪&quo ...
css分割线文字居中的7种实现方式
最近开始研究前端,会不定期更新一些小块代码,写下自己的学习笔记,也希望能和大家一起进步! 1.单个标签实现分隔线: <html> <head lang="en"& ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
php代码纵向排列文字怎么写,css里怎么文字纵向排列？
css里文字怎么纵向排列?文字怎么竖排?下面本篇文章就来给大家介绍使用CSS让文字纵向排列的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用writing- ...
CSS中垂直居中的七种方法
前言: 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题 ...

CSS 使文字纵向排列的七种方

CSS 使文字纵向排列的七种方相关推荐

最新文章

热门文章