通过CSS显示垂直文本
原文链接: CSS Vertical Text
原文日期: 2014年03月18日
翻译日期: 2014年3月22日
翻译人员: 铁锚
示例地址: http://davidwalsh.name/demo/css-vertical-text.php
我们所创建的HTML元素基本上都认为是水平的框架。 我们更加注意宽度而不是高度,特别是当它涉及到文本时。 然而,有时候我们确实想以垂直方式显示文本元素。 在以前那个脑瘫的 Internet Explorers 时代,这完全是一场必败之仗。 然而现在实现垂直文本就相当于轻轻地吹一口气。 下面演示如何做到这一点!
The CSS
现在使用 CSS transforms 实现垂直文本是很容易的:
/* 您可能需要添加浏览器前缀,参考: http://davidwalsh.name/vendor-prefixes */ .vertical-text { transform: rotate(90deg); transform-origin: left top 0; }
效果截图如下:
根据你想以哪个方向显示垂直文本, 旋转角度会有所不同,但它的旋转值将使文本垂直。 这是一个有用的提示:
.vertical-text { float: left; }
浮动元素本质上类似于自动宽度(auto width)!
CSS transforms 效率很高, 其能实现的功能比简单地将文本垂直要强大很多,但通过上面的代码,功能就实现了, 进步不也是很大吗?
通过CSS显示垂直文本的更多相关文章
- delphi Caption 垂直显示标签文本
//垂直显示标签文本 Label1.Caption:='垂'+#13+'直'+#13+'显'+#13+'示';//使用相同的方法,我们也可以制作垂直显示的提示(Hint):button1.Hint:= ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- 【css】长文本左侧显示省略号
classnames: https://blog.csdn.net/duola8789/article/details/71514450 react普通样式 行内样式: https://blog.cs ...
- HTML: css 修飾文本和字體
因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Propertie ...
- CSS属性定义 文本修饰 边框效果 背景修饰
一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- CSS颜色及文本字体
CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...
- css+html 关于文本的总结(整理中)
布局1:固定行数 <div> <p>示例文字示例文字示例文字示例文字</p> </div> <!-- CSS代码 --> div{ widt ...
随机推荐
- IOS开发初体验
IOS开发初体验 搭建开发环境 不多说什么了,开发环境的搭建太简单了,上App Store搜索XCode下载就行了,说多了都是眼泪 创建第一个IOS项目--HolleIOS 创建工程 选择工程创建位置 ...
- Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53303872 本文出自:[openXu的博客] 1分析 2定义组合控件布局 3继承最外层控件 ...
- Android开发艺术探索——第二章:IPC机制(中)
Android开发艺术探索--第二章:IPC机制(中) 好的,我们继续来了解IPC机制,在上篇我们可能就是把理论的知识写完了,然后现在基本上是可以实战了. 一.Android中的IPC方式 本节我们开 ...
- 代理IP爬取,计算,发放自动化系统
IoC Python端 MySQL端 PHP端 怎么使用 这学期有一门课叫<物联网与云计算>,于是我就做了一个大作业,实现的是对代理IP的爬取,计算推荐,发放给用户等任务的的自动化系统.由 ...
- Python实现八大排序算法(转载)+ 桶排序(原创)
插入排序 核心思想 代码实现 希尔排序 核心思想 代码实现 冒泡排序 核心思想 代码实现 快速排序 核心思想 代码实现 直接选择排序 核心思想 代码实现 堆排序 核心思想 代码实现 归并排序 核心思想 ...
- Java异常处理-----java异常体系
再三思考后还是决定贴图,csdn的格式,我是真玩不转,对不起了各位,继续将就吧. 错误原因:内存溢出.需要的内存已经超出了java虚拟机管理的内存范围. 错误原因:找不到类文件. 错误(Error): ...
- Android文件(File)操作
Android 使用与其他平台上基于磁盘的文件系统类似的文件系统. 本文讲述如何使用 Android 文件系统通过 File API 读取和写入文件. File 对象适合按照从开始到结束的顺序不跳过地 ...
- ROS连接ABB机械臂调试详细教程-ROS(indigo)和ABB RobotStudio 6.03.02-
在ROS industrial介绍中,给出了ROS和常用机械臂的连接方式.具体信息可以参考:http://wiki.ros.org/Industrial ROS连接ABB机械臂调试详细教程-ROS(i ...
- 10 GridView 样式属性
GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...
- Dynamics CRM 自定义上传附件的图片悬浮层显示
CRM中的附件是以流的形式保存在了数据库中,这样做的一个坏处是一旦系统运行时间久,附件上传的多了势必会导致数据库极速扩大,即影响系统的运行效率也对后期的迁移维护带来了不必要的麻烦.所以很多的客户都会要 ...