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 ...
随机推荐
- （转） 使用jdk的xjc命令由schema文件生成相应的实体类
背景:在webservice的开发过程中涉及到这一知识点,又必要来学习一下. 1 根据编写的schema来生成对应的java实体 1.1 实战 xcj命令有schema文件生成Java实体类 1.使用 ...
- (转)Memcached 在windows下的java使用
Memcached 在windows下的java使用 研究这个东东主要是为了解决在教务管理中选课系统的大并发情况下数据库频繁读写造成速度慢的问题,但要使用WEB服务器的内存,是不是可靠还需要验证, ...
- Spring源码情操陶冶-AbstractApplicationContext#postProcessBeanFactory
阅读源码有利于陶冶情操,承接前文Spring源码情操陶冶-AbstractApplicationContext#prepareBeanFactory 约定:web.xml中配置的contextClas ...
- 【LINUX】主进程、父进程、子进程、守护进程的概念
一.摘要 详解父进程.子进程.守护进程的区别,例子稍候补充 二.定义区别 主进程 程序执行的入口,可以理解为常用的main 函数 父进程 对于子进程而言, 子进程的创造者,可有多个子进程. 任何进程都 ...
- 简易 HTTP Server 实现(JAVA)
该简易的J2EE WEB容器缺失很多功能,却可以提供给大家学习HTTP容器大致流程. 注:容器功能很少,只供学习. 1. 支持静态内容与Servlet,不支持JSP 2. 仅支持304/404 3. ...
- 【bzoj2819】Nim
Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游 ...
- java8之lambda表达式（1）-基本语法
lambda表达式,即带有参数的表达式,为更清晰地理解lambda表达式,先看如下例子: (1) class Student{ private String name; private Double ...
- Android -- 深入了解自定义属性
1,相信我们写过自定义控件的同学都会有一个疑问,自定义属性到底是怎么工作的,为什么要使用自定义属性呢,接下来结带着大家一起来学习学习,在学习这一篇的时候,可以下看看我的上一篇<从源码的角度一步步 ...
- XAMPP启动MySQL时报端口被占用错误
1 问题描述 启动XAMPP中的mysql时宝凑,错误信息是:3306端口被占用 2 问题诊断 2.1 可能是在安装XAMPP之前安装了MySQL,这样电脑中就有两个MySQL啦,如果我们在安装时都采 ...
- Linux操作系统-命令-netstat
# 之前已经写过了3篇与＂性能测试＂有关系的Linux命令,它们分别是free.top.vmstat # 接下来还需要把另外2个命令也写下来:netstat和iostat 最近认真地读了1篇关于＂定位 ...