文档章节

4种CSS文字竖排方法

Jack088
 Jack088
发布于 2016/02/02 13:27
字数 408
阅读 72
收藏 1

有时候,我们需要对网页某个区域的文字竖排,竖向排列,横向的当然大家都见惯了,对于竖排,一时间找不到思路了,呵呵,其实和横排一样简单,下面介绍4种方法来实现CSS文字竖排。

第一种方法:将需要竖排显示的字符放在span中,在CSS中设置span的display属性为block,不过不推荐使用这种方法,因为有些麻烦,代码如下:

h1 span { display: block; } 
<h1> 
<span> N </span> 
<span> E </span> 
<span> T </span> 
<span> T </span> 
<span> U </span> 
<span> T </span> 
<span> S </span> 
</h1>

第二种方法A:同样使用CSS,在需要竖向显示的地方,强制定义显示区域的宽度,这样字符会自动竖向排列:请看具体代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Vertical Text</title> 
<style> 
h1 { 
width: 50px; 
font-size: 50px; 
word-wrap: break-word; 
} 
</style> 
</head> 
<body> 
<h1> NETTUTS </h1> 
</body> 
</html>

第二种方法B:同样是使用CSS,推荐使用这种方法,觉得这个方法兼容性也好,而且代码简洁,字符也容易控制。

<!DOCTYPE html> 
<html> 
<head> 
<title>竖向排列的文字</title> 
<style> 
h1 { 
width: 50px; 
font-size: 50px; 
word-wrap: break-word; 
letter-spacing: 20px; 
} 
</style> 
</head> 
<body> 
<h1>我爱北京天安门</h1> 
</body> 
</html>

第三种方法:使用JavaScript(不推荐,其实这么一个小小的功能,动用JS就太不划算了,毕竟我们有比这更有效、更简洁的办法)

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Vertical Text</title> 
<style> 
h1 span { display: block; } 
</style> 
</head> 
<body> 
<h1> NETTUTS </h1> 
<script> 
var h1 = document.getElementsByTagName(‘h1′)[0]; 
h1.innerHTML = ‘<span>’ + h1.innerHTML.split(”).join(‘</span><span>’) + ‘</span>’; 
</script> 
</body> 
</html>


本文转载自:http://www.codefans.net/articles/18.shtml

Jack088
粉丝 44
博文 526
码字总数 76455
作品 0
扬州
程序员
私信 提问
DOM 和 Canvas 如何实现文字竖向排列的效果

前言 开发 H5 遇到过几次竖排文字的需求,把实现思路梳理一下。 关于竖排文字的一些需求 输入框样式需做成竖排样式; 使用 Canvas 生成图片供用户保存,图片中的文字方向为竖排; 非汉字需与...

NingBo
03/05
0
0
使用CSS如何实现文字竖排

<style> h1 { width: 50px; font-size: 30px; word-wrap: break-word; letter-spacing: 20px; } </style> 横向排列的文字大家见惯了,那么使用CSS如何实现文字竖排呢?其实方法同样简单,如代......

miaojiangmin
2016/11/11
3
0
小结一下前端html+css的经验 (三)

img标签必须要写alt属性,当图片丢失或加载失败不会显示难看的叉叉,对SEO也比较友好。也可以在onerror事件里面指定默认图片地址或隐藏onerror="this.src='默认图片的url地址;this.onerror=n...

Rella蕾拉
2012/03/19
0
7
敏感词过滤软件--网络发言防和谐器

功能: 1.敏感词过滤(自动分隔、过滤敏感词) 2.文字转图片(支持一键上传到网络) 3.集成百度贴吧和谐测试器(百度贴吧专用) 4.竖排文字(古文竖排) 5.倒排文字(让整篇文章倒转过来) 6.强行分隔(...

自来水
2011/03/28
8K
1
实现跨浏览器的文字竖排

今日闲逛,走到了维基文库水调歌头 (明月几时有),恰巧发现他居然是文字竖排的,很有兴趣一看。 网上目前两种方法竖排, 一种是用 writing-mode:tb-rl; 另一种是用 layout-flow: vertical-id...

红薯
2009/04/14
295
0

没有更多内容

加载失败,请刷新页面

加载更多

[JavaScript]js模块化

没有模块化:<scrpit> CommonJS(服务端):NodeJS AMD(浏览器端):RequireJS等 CMD(浏览器端):Sea.js UMD ES6

Danni3
30分钟前
1
0
拯救你丢失的精度——BigInteger和BigDecimal类(入门)

第三阶段 JAVA常见对象的学习 BigInteger和BigDecimal类 BigInteger类 (一) 构造方法: //针对超过整数范围的运算(整数最大值:2147483647)BigInteger(String val) ####(二) 常用方法: ...

BWH_Steven
31分钟前
3
0
开源 java CMS - FreeCMS2.8 自定义标签 infoSearch

项目地址:http://www.freeteam.cn/ infoSearch 根据参数和搜索关键词提取信息分页对象。 参数 说明 siteid 信息所属站点id num 每页显示数量 order 排序类型 1 固顶有效并降序,发布时间降序...

freeteam
42分钟前
2
0
java思维导图整理

jmm https://www.edrawsoft.cn/viewer/public/s/b0178374373697; redis https://www.edrawsoft.cn/viewer/public/s/5691c269955848 map https://www.edrawsoft.cn/viewer/public/s/b67533638......

流光韶逝
57分钟前
6
0
Gnu/Linux 防止暴力扫描及其它

RedHat7 手工脚本: # iptables iptables -A INPUT -i eno16777728 -p tcp -m multiport --destination-port 135,136,137,138,139,445,4899,1900 -j LOG iptables -A INPUT -p tcp -m multip......

晒太阳的小猪
今天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部