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 ...
随机推荐
- PhpStrom如何安装主题？（总结三种不同格式安装方法）
在网上搜了很多都是不怎么齐全的方法,在这里我总结一下PhpStrom的三种不同格式的安装方法,以后就不用再去网上搜直接看我自己的博客就知道了.以下默认为Windows系统,Linux现在暂时还没更新. ...
- Github 的系统内部都在用什么开源软件？
有时候处理规模问题最好的办法就是让事情变得简单并尽你可能去避免出现这种情况.这是 GitHub 所采用的方法,林纳斯·托瓦兹(Linus Torvalds)在十年前开发了Git源代码控制工具,GitH ...
- Spring源码情操陶冶-ContextLoaderListener
前言:通过实例结合源码的方式解读,其中涉及到的文件来自于博主的Github毕设项目wxServer Note: Springboot应用不在本文章讨论范围 web.xml中启用Spring 在一般的w ...
- 浅析python 的import 模块（转）
摘要: 学习python有几天了,对import一直不是很清楚,和C里面的include是否一样,重复引入有问题么?搜索路径是怎样的?整理解决下我的疑问. 一 模块的搜索路径 模块的搜索路径都放在了s ...
- SQL SERVER Buffer Pool扩展
Buffer Pool扩展简介 Buffer Pool扩展是buffer pool 和非易失的SSD硬盘做连接.以SSD硬盘的特点来提高随机读性能. 在Buffer Pool 扩展之前,SQL Ser ...
- maven快速上手
1.maven安装 首先下载apache-maven-3.3.3-bin.zip(版本可以自己根据自己想要的下载). 解压后如下: 接下来配置系统环境变量: 到此,maven安装好了,接下来输入 ...
- Verilog 任意（奇数/偶数）分频器
参加过一次笔试,让实现3分频,楼主当时是懵逼的,脑子里只知道同时利用上升沿和下降沿,本来写对了,慌张面试,脑子不管用了,(因为是手写,只能用脑子仿真)后来又给改错了,捂脸... 还是逻辑不清晰,现在自 ...
- Python序列化和反序列化
Python序列化和反序列化 通过将对象序列化可以将其存储在变量或者文件中,可以保存当时对象的状态,实现其生命周期的延长.并且需要时可以再次将这个对象读取出来.Python中有几个常用模块可实现这一功 ...
- 51nod 1130 N的阶乘的长度(斯特林近似)
输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Input 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + ...
- C#快速入门
一.简介 1.C#是由Anders Hejlsberg和他的团队在.Net框架开发期间开发的:是.Net框架的一部分. C#是专为公共语言基础结构(CLI)设计的,CLI由可执行代码和运行时环境组成, ...