用div+css设置文字竖排
今天需要实现文字的竖排版，网上搜了搜果然还有，实现起来也非常简单。
只用于ie的方法
1. writing-mode（设置对象书写方向）
语法：writing-mode : lr-tb、tb-rl
参数：lr-tb：从左向右，从上往下 tb-rl：从上往下，从右向左
示例：div { writing-mode: tb-rl; }
2. text-align（设置对象中文本的对齐方式）
语法：text-align : left、right、center、justify
参数：left：左对齐 right：右对齐 center：居中 justify：两端对齐
示例：div { text-align : center; }
例子：
<html>
<head>
<title>竖排文字</title>
<style type="text/css">
.tbrl {Writing-mode:tb-rl;Text-align:right;font-size:9pt}
</style>
</head>
<body>
<div class="tbrl">
南唐 李 煜
春花秋月何時了
往事知多少
小樓昨夜又東風
故國不堪回首月明中
雕闌玉砌應猶在
只是朱顏改
問君能有幾多愁
恰似一江春水向東流
</body>
</html>
适用于主流浏览器
<html>
<head>
<title>竖排文字</title>
</head>
<body>
<div style="font-size:xx-large;font-weight:bold;line-height:1em;width:1.5em; float:right;">虞 美 人
</div>
<div style="width:1.5em; float:right;"> </div>
<div style="width:1.5em; float:right;">南唐 李 煜 </div>
<div style="width:1.5em; float:right;">春花秋月何時了</div>
<div style="width:1.5em; float:right;">往事知多少 </div>
<div style="width:1.5em; float:right;">小樓昨夜又東風 </div>
<div style="width:1.5em; float:right;">故國不堪回首月明中</div>
<div style="width:1.5em; float:right;">雕闌玉砌應猶在 </div>
<div style="width:1.5em; float:right;">只是朱顏改</div>
<div style="width:1.5em; float:right;">問君能有幾多愁 </div>
<div style="width:1.5em; float:right;">恰似一江春水向東流 </div>
</body>
</html>
用div+css设置文字竖排相关推荐
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现？
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- CSS 实现文字竖排并设置间距
CSS 实现文字竖排并设置间距 <div class="vertical-title">我是竖排文字</div> 1.设置writing-mode属性 .v ...
- php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
- CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
- CSS设置文字的划线
CSS设置文字的划线 文字加上下划线.顶划线和删除线,在文档中是经常使用的. CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果. <span style=" ...
- 如何用css设置文字的聚光灯效果
要用 CSS 设置文字的聚光灯效果,你可以使用 text-shadow 属性. 例如: .highlighted {text-shadow: 0 0 5px #ffff00; } 在这个例子中,我们为 ...
- css设置文字溢出隐藏
css设置文字溢出隐藏 让文字只显示一行,超出显示省略号 多行文本, 显示 n 行,剩下的省略号替代 仅仅是用来提示自己,不要忘记的 让文字只显示一行,超出显示省略号 overflow: hidden ...
- CSS设置文字镂空效果
CSS设置文字镂空效果 color设置transparent,也就是透明 -webkit-text-stroke: 1px @theme-font-color;可以自定义边框的宽度和颜色 color: ...
- css 设置文字隐藏
css 设置文字隐藏 设置display: none:但是这个设置后,后面的字体将会向前移动:就是隐藏之后不占位置: 设置opacity: 0 :会被子元素继承,但是不能设置子元素opacity:0来 ...
最新文章
- RHEL6.4换CentOS源
- vector在java中用什么_在java中使用Vector是否安全？
- c语言中,x-y,'105',ab,7f8那个是正确的,C语言程序设计_第三章 数据.ppt
- 计算机术语局部性,【计算机基础】程序的局部性简介
- 机器学习第18篇 - Boruta特征变量筛选（2）
- 删除python类中所有未使用的方法？
- python的tab自动补全
- JavaScript 中数组 sort() 方法的基本使用
- 【转】vim ctag使用方法
- 第二十一章：变换（十四）
- python 通达信k线_通达信自定义数据采集,使用python在通达信里面选股
- 关于被隐藏的文件夹无法去掉隐藏的属性
- Git下载、安装及环境配置（超详细）
- 计算机中丢失galaxy2d.dll,galaxy2d.dll
- ARP协议(2)ARP协议格式详解
- feign调用简单实例
- Excel转xml简单方法
- 40核至强服务器性能如何,20核心40线程怎么样？双路E5-2680 V2评测
- UVALive 7279 Sheldon Numbers （暴力打表）
- shit 环信 IM SDK IM SDK web