网页文字竖排的几种实现方式
2021-06-18 21:09
标签：ems 左右 action log position view evel cal 代码实现 古时候的书籍里面文字的书写方式都是从上到下从右向左书写的，我们可不可以在网页上实现这种文字排版效果，虽然现在竖排在网页上用的比较的少，但是我们可以在我们自己的个人网站或者博客介绍页面用竖排来排版，使网页样式看起来更加的丰富和复古！ 通过一些尝试我找到了如下3中方式在网页上竖排文字的方法，各有各的缺点和优点，下面我们就来看看具体的方法和实现效果吧！ 实现原理：把一短话的每一句放在一个div中，设置div的宽度和要显示的字体的大小一样（div的高度=字数×字体大小）,div就变成了一个竖条每一行就只能显示一个文字，第二个文字就会被挤到下一行，然后把div的float设置为right向右浮动排列。就达到了一首诗的竖排显示。 代码实现: 通过float的方式实现文字竖排的demo 这种方式的优缺点： 实现原理：把一段话的每一个字放在一个span标签中(文字比较多可以通过js生成span)，然后把这些span标签放在一个大的div容器中，将容器div顺时针旋转90度，然后将容器中的span逆时针旋转90度，经过两次旋转之后就达到了竖排文字的需求。 代码实现： 通过transform:rotate方式实现文字竖排的demo 这种方式的优缺点： writing-mode直译过来就是书写模式，它是为了控制文本布局而产生的，换句话说它就是用来实现文字竖排的，只不过文字竖排我们平时用的少，所以这个css属性也不常见，发现这个属性之前我还是在用一些其它方式（前两中方法）实现文字的竖排。 writing-mode的属性比较多，详细请看MDN,文字竖排使用到的属性是 代码实现 水调歌头 苏 轼 明月几时有 把酒问青天 不知天上宫阙 今夕是何年 我欲乘风归去 惟恐琼楼玉宇 高处不胜寒 起舞弄清影 何似在人间 转朱阁 低绮户 照无眠 不应有恨 何事长向别时圆 人有悲欢离合 月有阴晴圆缺 此事古难全 但愿人长久 千里共蝉娟 水调歌头 苏 轼 明月几时有 把酒问青天 不知天上宫阙 今夕是何年 我欲乘风归去 惟恐琼楼玉宇 高处不胜寒 起舞弄清影 何似在人间 转朱阁 低绮户 照无眠 不应有恨 何事长向别时圆 人有悲欢离合 月有阴晴圆缺 此事古难全 但愿人长久 千里共蝉娟 通过write-mode方式实现文字竖排的demo 这种方式的优缺点： 注意事项：write-mode会改变一些原有的规则，如我们队上面的content1中的p设置行高，那么行高会变成左右行距离而不是上下行距。 本文如有误，请不吝赐教！ 原文标题：网页文字竖排的几种实现方式 原文链接：http://www.mengxiangjia.info/2017/04/05/text-landscape/ 版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0 网页文字竖排的几种实现方式 标签：ems 左右 action log position view evel cal 代码实现 原文地址：http://www.cnblogs.com/wuhuan-think/p/7196491.html方式1、css属性float实现文字竖排#
优点：网页文档的书写和我们平时正常书写网页时候一样，可以为每一行设置不同的显示样式。
缺点：如果一行文字比较长，没有办法换行~方式2、css属性transform:rotate实现文字竖排#
优点：一大段文字也可以实现自动换行。 缺点：在具体位置实现换行控制比较麻烦，而且每个字写都要用一个span标签来包住。方式3、CSS属性write-mode实现文字竖排#
writing-mode:vertical-rl从右向左竖排,writing-mode:vertical-lr从左向右竖排
优点：实现文字竖排的方式比较的方便和优雅 缺点：语法比较多，而且有两套不同的规范（IE和css3）！
下一篇：web存储