css控制竖直文字显示
假如有一天，你把水平文字看腻味了......
我建议你不妨试试垂直文字显示，就像这样：
我
是
竖
直
显
示
的
；
哈哈！
言归正传，怎么把一段话，垂直显示呢？
方法1：
//把下面代码另存为html试试就知道了；
//少些了些代码，适合有基础的同学观看，不会再问我；
h1 span { display: block; }
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U
<span> T </span>
<span> S </span>
</h1>
方法2：
//把下面代码另存为html试试就知道了；
<!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>
方法3：
//把下面代码另存为html试试就知道了；
<!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>
方法4：
//javascript实现的，复杂化了，不过可以装逼嘛
<!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>
谢谢观看！
css控制竖直文字显示的更多相关文章
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- 实现一个竖直的显示表头的表格（vue版本）
今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图.默认显示两列. vue实现代码如下: tableComponent.vue: <template> <table ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- css控制打印时只显示指定区域
CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...
- Winform中设置ZedGraph因设置小刻度导致的竖直虚线显示过多
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- css控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将 ...
- css水平竖直居中方式
CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...
- Css控制div水平垂直居中显示
<style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...
- 纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...
随机推荐
- Hibernate 实体关联关系映射----总结
在我看来,Hibernate提供这些映射关系,常用就是一对一和多对一,并且在能不用连接表的时候尽量不要用连接表.多对多会用到,如果用到了,应该首先考虑底层数据库设计是否合理. 在实际开发中,在Hi ...
- 使用Fiddler调试手机端页面请求/抓包
简介 Fiddler作为一个强大的抓包工具,也是非常强大的http(s)协议分析工具,我们通常用它跟踪请求,PC端使用这里暂不做介绍(这里前提是熟悉PC端的使用),使用很简单. 那么我们如何来用它来跟 ...
- HDU1124 Factorial
Problem Description The most important part of a GSM network is so called Base Transceiver Station ( ...
- jsp元素
1.指令元素:用于在JSP转换为Servlet阶段提供JSP页面的相关信息,如页面采用的字符编码集.页面中需要导入的类等信息,指令元素不会产生任何的输出到当前JSP的输出流中 指令元素有三种指令:pa ...
- yii2 队列 shmilyzxt/yii2-queue 简介
在yii2论坛中看到一个关于队列的帖子,感觉不错.http://www.yiichina.com/extension/1084 (注:SendMail 错写为 SendMial,粘贴时要注意了.) 在 ...
- RobotFramework自动化测试框架的基础关键字（四）
1.1.1 如何使用for循环 不管在哪种编程语言中,for循环都是必不可少的,在Robot Framework中,我们也可以使用for循环来做遍历处理. 我们用for循环对一个列表进行 ...
- Linux学习-->linux系统在移动硬盘的安装
由于自己看了一些文章和linux的好奇,想来一窥Linux的奥秘,因此自己准备学习使用Linux系统,这里记录下自己的安装过程,方便以后自己重装系统时进行查阅. 参考的书籍是鸟哥的<Linux私 ...
- FaceRank-人脸打分基于 TensorFlow 的 CNN 模型
FaceRank-人脸打分基于 TensorFlow 的 CNN 模型 隐私 因为隐私问题,训练图片集并不提供,稍微可能会放一些卡通图片. 数据集 130张 128*128 张网络图片,图片名: 1- ...
- TransactionTemplate编程式事务管理方式的进阶使用---自定义拓展模板类
1, 前面一篇的文章介绍了TransactionTemplate的基本使用方法. 同事在其基础上又做了一层封装,这样更贴合本公司的业务与规范. 2, 首先定义了两个接口: ServiceTemplat ...
- 深入浅出数据结构C语言班（11）——简要介绍算法时间复杂度
在接下来的数据结构博文中,我们将会开始接触到一些算法,也就是"解决某个问题的方法",而解决同一个问题总是会存在不同的算法,所以我们需要在不同的算法之中做出抉择,而做出抉择的根据往往 ...