这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战
在平常项目中会遇到这种竖着展示的样式，发现有几种实现方式，下面和大家分享一下：
一、使用writing-mode（推荐使用）
定义
先说说这个属性什么意思，字面翻译过来就是“写字-模式”，也就是文字展示的模式。官方定义是CSS的属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
有这几个属性值：
- horizontal-tb: 水平展示，也就是横着展示文字，最平常默认的样式
- vertical-rl：垂直展示，也就是上面图片上实现的样式
- vertical-lr：垂直展示，根据内容从上到下排列，和上面的属性一般是兼容替换
- sideways-rl：根据内容垂直方向从上到下排列
- sideways-lr: 根据内容垂直方向从下到上排列，和上面的属性一般是兼容替换
使用
writing-mode: vertical-lr;/*垂直展示*/
writing-mode: tb-lr;/*兼容IE*/
display: initial;
background: #175a8e;
text-align: center;
color: #fff;
margin-left: 50px;
margin-top: 50px;
padding: 40px;
font-size: 28px;
height: 595px;
letter-spacing: 10px;/*设置文字间距*/
因为是垂直展示的，所以设置margin不太好看，只能设置padding来让每列文字间距好看一点，但是如果想设置文字之间的间距就不能使用line-height来实现，因为这个line-height是每列div的宽度间距，可以通过设置letter-spacing:10px来设置文字之间的间距。
二、设定宽度，让文字挤出去不得不换行（推荐使用）
这个办法就是固定外部div宽度只有50px，文字内容太多只能换行展示，不过这样要注意不能设置文字的display:inline这种属性，然后通过设置line-height设置文字间距，并且如果列很多，只能多加几个div实现同样的方式。
三、使用br换行（不推荐使用）
<div>愿<br/>你<br/>三<br/>冬<br/>暖<br/></div>
这个就是最笨的办法了吧，也是最麻烦的办法了，在每个字后面加
实现换行，如果文字很多，或者是动态数据就很麻烦，总不能在拿到数据后循环在每个字后面加br实现吧，所以不推荐使用。
感谢阅读，点个赞呀~
