css实现文字竖排的方式

BakerJ 发布于2019-08-30 11:16 / 1056人阅读

摘要：中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列英文的时候需要加上这句，自动换行说明实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。

单行文字竖向排列

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
}

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
    word-break:break-all;
}

说明：实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。

多行文字竖向排列

.two{  
    margin: 0 auto;  
    height: 140px;  
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
}

说明：高度很重要，如果需要控制文字的间距和行距，可以添加属性letter-spacing和line-height。

扩展：竖排文字动画显示效果（文字从上到下动画显示出来）

end~~~
如有更好方法，欢迎大家留言讨论，谢谢！！

云服务器 GPU云服务器文字竖排 php文字竖排互联网专线的接入实现方式 css引入方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114888.html

css实现文字竖排的方式

摘要：中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列英文的时候需要加上这句，自动换行说明实现文字单行竖向排列，只需要把宽度设置为刚好容纳一个字体的宽度即可。 html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列 showImg(https://segmentfault.com/img/bVbuvoD?w=62&h...

wdzgege 2019-08-02 15:26 评论0 收藏0
H5 canvas生成图片并上传文件转成PDF下载canvas文字排版

摘要：将预览的图片上传，后端生成，在管理系统中下载。技术要点文字排版设置指定背景颜色引入外部字体绘制文字图片将生成的图片转成上传这里根据后端协商，此处后端要求将图片生成，并点击批量下载实现步骤文字排版在一般容器中，如果要实现文字的排版很容易。最近遇到一个业务需求，在小程序端定制预览功能，并在预览的图片中使用指定的外部字体。将预览的图片上传OSS，后端生成PDF，在管理系统中下载。但是………...

canopus4u 2019-08-23 18:24 评论0 收藏0
前端每日实战：161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。在中增加一个元素，并把一句话分为段定位文字，并竖排段文字调整字号和字间距，使段文字对齐大功告成 showImg(https://segmentfault.com/img/bVbiCnk?w=400&h=301); 效果预览按下右侧的点击预览按钮可...

HtmlCssJs 2019-08-29 17:03 评论0 收藏0
前端每日实战：161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。在中增加一个元素，并把一句话分为段定位文字，并竖排段文字调整字号和字间距，使段文字对齐大功告成 showImg(https://segmentfault.com/img/bVbiCnk?w=400&h=301); 效果预览按下右侧的点击预览按钮可...

Integ 2019-08-02 11:47 评论0 收藏0