先上个效果图:
那如何实现呢？
方案一：
html代码
<div>床前明月光</div>
<div>疑是地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
css代码
div{width:1.3em;float:right;}
也就是div元素排成一行，然后div宽度设为小于2em宽，又因为div内容默认换行，得最终效果。方案二：
通过writing-mode属性来实现。
html代码
<div>床前明月光 疑是地上霜 举头望明月 低头思故乡</div>
css代码
div{width:100%;height:100px;-webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;}
方案三：
通过一些JavaScript库实现，比如taketori.js。
本文参考链接：目前 CSS 实现竖排文本较为通用的方式是什么
先上个效果图: 那如何实现呢？ 方案一： html代码 床前明月光 疑是地上霜 举头望明月 低头思故乡 css代码...
工作中，单元格文本内容需要折行竖排显示，你是否还在“Alt+Enter”诸葛文字折行？如何快速实现，下面带来快捷实...
思路： 1，将要显示的文本由前向后拆分为若干列； 2，然后由每一列组成要显示的每一行； 3，给每一行增加换行后拼接...
div中文字竖排 div中文字太长显示... div设置一个自定义图表
先看一下设计图, 一个 cell, 上面添加两竖排的Label, 两竖排的 Label 宽度都是不固定的,当内容过...
1.工作技能 ： ECXEL 文字竖排显示 √ 2. TED : 网易云课堂 45激发学习兴趣的3条黄金法则 √ ...
有些可恶的ui常常会搞上图这些竖着显示的label或者button，安卓端貌似实现比较简单，但iOS端显示却比较麻...
NRD Studio绘制的关系图谱，节点名称和描述信息显示竖排文字均可通过文本换行功能实现。 打开【编辑节点】面板...
很多同学反映，在CorelDRAW中找不到竖排文本工具在哪，或者在设置竖排文本的时候，遇到数字和字母，竖排文字就会...
本文标题：如何做竖排显示内容
本文链接：https://www.haomeiwen.com/subject/lopulttx.html
网友评论