html 英文文字纵向排列,CSS几种简单方法实现文字竖向排版

1.一个句子的竖向排列

如图:

1.

fb0e82ca8ee78bac7818a9a9891b9ab5.png                      2. 

e4918ff42b84766d980c5f84ce1ceac2.png

test

.one {

width: 20px;

margin: 0 auto;

line-height: 24px;

font-size: 20px;

}

.two {

width: 15px;

margin: 0 auto;

line-height: 24px;

font-size: 20px;

word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/

}

我是竖列排版
I AM ENGLISH

2.多个句子竖向排列(如古诗)

如图:

1.

86b80531478653606f23401132937091.png   2.

419444e0212c09855744d5d03541310d.png 3.

5f6b4d674763ae786f3a329598544e68.png

test

.one {

margin: 0 auto;

height: 140px;

writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/

writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/

}

欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。
I AM ENGLISH

3.字体横行,整体竖向排版

如图:

6a3645535e4ef5e826ac85b1abfb2365.png

test

.one {

margin: 150px auto;

width: 200px;

font-size: 20px;

line-height: 24px;

transform:rotate(90deg);

-ms-transform:rotate(90deg); /* IE 9 */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg); /* Opera */

}

欲话毗陵君反袂
ENGLISH

共勉

本文来源于网络:查看 >https://blog.csdn.net/sangjinchao/article/details/60139706

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jstree 节点拖拽保存数据库

需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $(**).jstree({//plugins-各种jstree的插件引入,展示树的多样性 plugins : [ "dnd", "types", "wholerow" ], core : {"check_callbac…

自动添加html结束标志,HTML:包含或排除可选的结束标记?

MYYA我在这里添加一些链接来帮助您了解HTML的历史,以便您了解各种矛盾。这不是你的问题的答案,但在阅读这些各种摘要后你会知道更多。我们是怎么来到这里的? - 潜入HTML5网络历史HTML简史HTML的历史 - HTML WG WikiDive Into HTML5的一些摘录…

JAR清单类路径不仅适用于Java Application Launcher

自从我开始学习Java以来​​,我几乎已经知道, 清单文件中的Class-Path标头字段为可执行JAR (具有由另一个称为Main-Class清单指定应用程序起点的 JAR)指定相对运行时类路径。 一个同事最近碰到一个让我感到惊讶,因为它…

通过url,获取html内容,并解析,如何使用 JavaScript 解析 URL

在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。开始创建一个以下内容的 HTML 文件,并在浏览器中打开。JavaScript URL parsing// 激动人心的代码即将写在这里如果你想尝试本文中的任何内容,可以…

正确使用计算机说课稿,《计算机结构原理初步》说课稿

在教师招聘考试的过程中,高中信息说课稿的难度就在于如何处理理论与实践的关系,希望这篇《计算机结构原理初步》说课稿能给予你帮助。各位考官大家好!我是号考生,今天我说课的题目是《计算机结构原理初步》。现代教学理论认为,在教…

计算机2013知识,2013年全国计算机一级考试B基本知识点五

基础5单元格操作对已建立的工作表,根据需要可以编辑修改其中的数据首先要移动单元格指针到目的地或选定编辑对象,然后才能进行增、删、改操作。1.单元格指针的移动要编辑某单元格,必须把单元格指针移动到该单元格,使之成为当前单元…

smartgwt_高级SmartGWT教程,第1部分

smartgwt贾斯汀(Justin),帕特(Pat)和我已经开始着手进行一个需要管理和管理用户界面的副项目。 在与SmartGWT和GWT共同工作了一段时间之后,我们决定使用SmartGWT创建接口。 我们非常喜欢视觉组件&#xff0…

计算机英语女人英语怎么说,英语时差:计算机和女人

00:0000:00微信扫码登陆,畅听全站所有音频!(20秒后自动关闭)X关注后,点此关闭https://online2.tingclass.net/lesson/shi0529/10000/10183/67.mp3https://image.tingclass.net/statics/js/2012When you hear the term, "computer geek,&…

云计算系统是大规模计算机系统吗,云计算的系统架构及技术探析

云计算技术属于计算机技术的一种,是目前计算机技术中应用以及研究重点之一,那么云计算到底是什么呢?云计算是在并行处理,分析式处理等技术的基础上发展而来的新技术,可以有效的将计算机进行整合,建立新颖的…

Vue 封装echarts柱状图(Bar)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 显示效果 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title" v-if"title">{{ title }}</div>…

smartgwt_高级SmartGWT教程,第2部分

smartgwt这是我的教程的第二部分&#xff0c;有关使用SmartGWT快速进行UI开发。 在本教程的第一部分中 &#xff0c;我们创建了基本的界面布局并添加了一些基本组件。 现在是时候解决这个问题&#xff0c;并使用SmartGWT的真正功能了。 在继续之前&#xff0c;让我们记住到目前…

百年理工计算机专业课程,这两所国内的百年理工院校,实力强劲,都是国内顶尖实力...

2021年全国高考终于圆满落下了帷幕&#xff0c;但考生们即将要面临一件人生大事&#xff0c;那就是高考志愿填报&#xff0c;因此高考虽然结束&#xff0c;但考生们的压力仍然是不小&#xff0c;只有正确地填好高考志愿&#xff0c;确保自己能够被心仪的高校收录取&#xff0c;…

数学图形之SineSurface与粽子曲面

SineSurface直译为正弦曲面.这有可能和你想象的正弦曲线不一样.如果把正弦曲线绕Y轴旋转,得到的该是正弦波曲面.这个曲面与上一节中的罗马曲面有些相似,那个是被捏过的正四面体,这个则是个被捏过正方体. 本文将展示SineSurface与粽子曲面的生成算法和切图,使用自己定义语法的脚…

计算机工程学院文艺例会,西航职院 | 计算机工程学院 2019年度学生会干部第一次例会...

原标题&#xff1a;西航职院 | 计算机工程学院 2019年度学生会干部第一次例会西航职院计算机工程学院&#xff0c;2019年度第一次学生会干部例会&#xff0c;于2月26日下午在四号教学楼201顺利召开。参加此次会议的有计算机学生会全体学生干部和指导老师刘老师。会议开始&#…

dateformat线程_Java最佳实践–多线程环境中的DateFormat

dateformat线程这是有关使用Java编程语言时的拟议实践的系列文章的第一篇。 所有讨论的主题均基于用例&#xff0c;这些用例源于电信行业关键任务超高性能生产系统的开发。 在阅读本文的每个部分之前&#xff0c;强烈建议您参考相关的Java API文档以获取详细信息和代码示例。…

关于图连通性的几道题(水)

POJ 2186 强连通分量缩点 1 #include<cstdio>2 #include<cstring>3 #include<algorithm>4 using namespace std;5 6 int en[10010], col[10010], dfn[10010], low[10010], stack[10010], tot[10010], chu[10010];7 bool ins[10010];8 int n, m, esize, dtime…

一台计算机硬盘容量标为800gb,一台计算机的硬盘容量标为800GB,其存储容量是()。...

台硬盘不适的装用于料是室外饰材。行的有_能进操作&#xff0c;计算机系统源管在W“资”中操作理器。不正有_确的&#xff0c;容量下列叙述中。的有描述正确&#xff0c;其存文输的中s系统下关于入。文档选定应_整篇&#xff0c;储容d文档编在W辑中。不能作进行_操&#xff0c;…

jQuery验证插件

jQuery验证插件 原文:jQuery验证插件学习要点&#xff1a; 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件&#xff08;validate.js&#xff09;&#xff0c;是一款验证常规表单数据合法性的插件。使用它&#xff0c;极大的解…

爱思助手更新后无法连接服务器,爱思助手出现无法连接或连接超时的操作教程...

使用爱思助手的用户很多&#xff0c;一些新用户不清楚出现无法连接或连接超时怎样处理&#xff0c;今天小编给大家带来在爱思助手出现无法连接或连接超时的操作教程&#xff0c;希望可以帮到大家。爱思助手出现无法连接或连接超时的操作教程一、数据线和电脑USB接口正常状态请确…

计算机演示题打不开,大神为你演示win7系统计算机上右键管理打不开的还原技巧...

当我们经常使用的电脑工作的时候&#xff0c;时间久了难免会遇到win7系统计算机上右键管理打不开的问题&#xff0c;如今就有用户反映在使用电脑的时候遇到win7系统计算机上右键管理打不开的情况不知怎么解决&#xff0c;针对这个问题小编就整理总结出win7系统计算机上右键管理…