目前CSS实现竖排文本较为通用的方式是什么？

发布网友 发布时间：2022-04-21 23:04

我来回答

共3个回答

热心网友 时间：2023-06-25 18:44

可以使用css的width标签实现一列的文字竖排显示。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，css文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下css代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现的一列的文字竖排显示效果。

热心网友 时间：2023-06-25 18:45

一、使用writing-mode属性
　　语法：writing-mode:lr-tb或writing-mode:tb-rl
　　参数：
　　1、lr-tb：从左向右，从上往下
　　2、tb-rl：从上往下，从右向左
运行代码发现，IE显示正常，火狐却不行，所以不建议使用writing-mode属性，下面使用模拟方法实现。
　二、模拟文字竖排
　　代码：
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;}
　　此方法让li右浮动，设置li宽度和字宽度一样都是14px，这样就自动换行了。另外，“word-wrap:break-word;word-break:nomal;”这句实现标点自动换行（连续字符自动换行）。

热心网友 时间：2023-06-25 18:46

做个盒子设置成和文字差不多宽试试。