在html中写竖着的文字,css实现文字竖排效果示例代码

在word、excel中可以轻松的实现文字竖排的形式，但是在html页面中呢？现今我有了这种需要，我想要的效果如下：

复制代码代码如下:

这不是被美工嵌在的文字，而是通过div加上的，该当如何来实现此功能呢？

别告诉我里面弄俩div，每个div宽度与字体一样，一个div一列，这样或许能实现，但太低端了，不是我们技术迷应该追求的，也不是应该提倡的。问过美工和另一位资深(猜想)开发者，他们都不太清楚如何实现。很正常，因为这个功能不常用到，很少有人会关注到。我心中却坚信，html+css不会连这样的简单功能都没有，怀着这样的信念，我开始了多次百度查找，发现css中确实有那么个属性是管这个的。

writing-mode属性

语法：writing-mode:lr-tb或writing-mode:tb-rl

参数：

1、lr-tb：从左向右，从上往下

2、tb-rl：从上往下，从右向左

测试代码：

[code]

div{width:100px;height:80px;writing-mode:tb-rl;}

无标题文档

大刘大刘，寂寞不愁。人有女人，我有大刘。

效果：

可以看到文字确实是竖排了，但整体上却是从右向左排列了，这个跟中国古人用毛笔写字类似，可能不太符合当代人的习惯。

网上还有一种情况，就是模拟竖排，使用ul和li列表的形式来解决。代码如下：

复制代码代码如下:

ul{width:100px;height:80px;overflow:hidden;list-style:none;}

ul li{float:right;display:inline;margin-left:4px;width:14px;height:100px;font-size:14px;word-wrap:break-word;word-break:nomal;}

无标题文档

大刘大刘，
寂寞不愁。
人有女人，
我有大刘。

效果：

可以看到，效果是一样的。但依然是从右往左排列。怎么解决这个问题呢？这个就简单了，把float：right改成float：left不就完了。请看效果：

在内外围各控制一下边距，这个问题就得到完美解决了。

在html中写竖着的文字,css实现文字竖排效果示例代码相关推荐

HTML中marquee实现图片滚动,HTML标签marquee实现滚动效果(示例代码)
页面的自动滚动效果,可由javascript来实现,但是今天无意中发现了一个html标签 - 可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语 ...
html语言闪烁特效代码,css3 实现文字闪烁效果的三种方式示例代码
1.通过改变透明度来实现文字的渐变闪烁,效果图: 文字闪烁星星之火可以燎原 .myclass{ letter-spacing:5px;/*字间距*/ color: red; font-weight: ...
在html中写竖着的文字,css怎么让文字竖着？
在网页编写时会遇到需要设置文字竖着排列的情况,我们可以通过css设置文字竖着排列,那么使用css该如何设置文字竖着排列呢?小明我们就来看一下css设置文字竖着排列的方法吧. css设置文字竖着排列的方 ...
Python中的面向对象编程(类编程)由简单到复杂的示例代码
关于本文代码中的self的含义,大家可参考下面这篇博文: https://blog.csdn.net/wenhao_ir/article/details/125384347 另:说明一下,本博文中&q ...
Java中File类中getAbsolutePath、getPath、getName、length普通方法用法示例代码
File类中getAbsolutePath.getPath.getName.length普通方法用法示例总概述: String getAbsolutePath() 返回此抽象路径 ...
html中三角向下符号,使用css实现三角符号效果
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
uniapp中上传图片（拍摄）和预览图片(图例和示例代码)
uniapp中上传图片和预览图片图例: 示例代码: 内容 uni.chooseImage上传图片 uni.previewImage预览图片复习下uniapp的上传图片和预览图片需求:可以拍摄和上 ...
html怎么在字体中加波浪线,强大的CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
css的排版连起来跟全部竖着的区别,CSS实现文字竖排排版
使用bat/vbs/ahk对Windows下进行自动化操作回想90年代,我们在DOS下使用各种命令链对操作进行简化和自动化,如DOS 5.0添加的DosKey,利用管道和重定向对多组命令进行链式操作 ...

在html中写竖着的文字,css实现文字竖排效果示例代码

在html中写竖着的文字,css实现文字竖排效果示例代码相关推荐

最新文章

热门文章