【前言】
刚才有个同学为了道问题:“怎么使文本竖直排列?”
常用的方法就是将元素的宽度调小,文本自然会竖直排列,那么除此外还有别的方法吗?这里我简单总结几个别的方法。以后上课重点强调下
【主体】
(1)常用方法
<div class="one">我是竖列排版</div> <div class="two">I AM ENGLISH</div>
.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;/*英文的时候需要加上这句,自动换行*/ }
(2)其他方法
<div class="one">欲话毗陵君反袂,欲言夏口我沾衣。谁知临老相逢日,悲叹声多语笑稀。</div> <div class="one">I AM ENGLISH</div>
.one { margin: 0 auto; height: 140px; writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl;*/ }
(3)字体横行,整体竖向排版(整体旋转)
transform:rotate(90deg);
.
相关推荐
css实现竖向步骤条.zip
CSS实现的网页中文字排版的几种方式,希望对大家有帮助
CSS图片和文字排版教程 本教程旨在帮助初学阶段的学员掌握CSS图片和文字排版的知识,通过详细讲解...通过掌握这些CSS文字样式设置,学员可以轻松地实现各种图像与文字的混合排版方式,提高自己的设计能力和排版技巧。
CSS实现超级炫酷的流光按钮效果 在网页中实现文字的一个一个出现
jq+css实现竖向导航栏.
这是一款使用jQuery和css3制作的文字排版动画效果插件。该文字排版插件中共包含了7种效果:文字淡入淡出、文字烟雾效果、文字渐变效果、文字运动效果等等。
纯DIV+CSS制作的竖向三级导航弹出菜单代码
XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: <div id="header"><h1>Header</h1></div> <p><strong>1) Content here.</strong> column ...
本文将深入探讨如何使用JavaScript和CSS这两种强大的Web技术来实现文字闪烁的效果。 首先,我们来了解一下CSS(Cascading Style Sheets)在实现文字闪烁中的作用。CSS主要用于控制网页的布局和样式。要实现文字闪烁...
CSS实现多行文字显示省略号效果.zip
这是一款使用jquery.lettering.js和CSS3制作的精美的文字排版特效插件。该文字排版特效共有3种效果,通过jQuery和css3将文字渲染为各种不同的样式,在进行组合排版,排版效果非常精美。
消息列表向上滚动,不使用js操作,纯css3实现向上无缝滚动。
css3文字特效_css3火焰文字_css3文字渐变代码
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。...使用CSS 实现内容逐个输出的效果
css实现文字竖排效果
1.前端如何CSS实现文字滚动效果,鼠标悬浮停止滚动 【内容介绍】 主要应用于web后台管理系统的头部实现文字滚动的效果,如何通过CSS来实现文字动态滚动的效果,核心应用于告警展示,重要通知等应用场景。 【页面效果...
HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且颜色很鲜艳,当然了,字符的颜色可以自己定义,具体请参见HTML演示文件,文字内容的自定义也很方便,在HTML中输入文字内容...
这是一个用CSS实现竖型菜单的源代码,本源代码已经被测试通过了,大家可以放心使用。
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果。
jQuery CSS3文字排版效果