原文链接: 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显示垂直文本的更多相关文章

  1. delphi Caption 垂直显示标签文本

    //垂直显示标签文本 Label1.Caption:='垂'+#13+'直'+#13+'显'+#13+'示';//使用相同的方法,我们也可以制作垂直显示的提示(Hint):button1.Hint:= ...

  2. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  3. 【css】长文本左侧显示省略号

    classnames: https://blog.csdn.net/duola8789/article/details/71514450 react普通样式 行内样式: https://blog.cs ...

  4. HTML: css 修飾文本和字體

    因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Propertie ...

  5. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  6. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  7. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  8. CSS颜色及文本字体

    CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...

  9. css+html 关于文本的总结(整理中)

    布局1:固定行数 <div> <p>示例文字示例文字示例文字示例文字</p> </div> <!-- CSS代码 --> div{ widt ...

随机推荐

  1. mongo 读分析

    分布式读 读冲突 分布式中数据库有多份数据,各份数据可能存在不一致性. mongo 只会写到primary节点上,理论上来说不会有文档冲突,也就是说数据库中的数据都以primary节点为标准. 但是有 ...

  2. 使用GDAL进行RPC坐标转换

    使用GDAL进行RPC坐标转换 对于高分辨率遥感卫星数据而言,目前几乎都提供了有理函数模型(RFM)来进行图像校正(SPOT系列提供了有理函数模型之外还提供了严格轨道模型).对遥感影像进行校正目前最常 ...

  3. 高仿腾讯QQ最终版

    之前写过一篇关于高仿腾讯QQ的博客,不知道的看这:http://blog.csdn.net/htq__/article/details/51840273 ,主要是从界面上高仿了腾讯QQ,在UI上基本上 ...

  4. springMVC源码分析--异常处理机制HandlerExceptionResolver简单示例(一)

    springMVC对Controller执行过程中出现的异常提供了统一的处理机制,其实这种处理机制也简单,只要抛出的异常在DispatcherServlet中都会进行捕获,这样就可以统一的对异常进行处 ...

  5. JAXB(Java Architecture for XML Binding)

    marshal(Java对象转化成XML) import javax.xml.bind.annotation.XmlRootElement; //指定根元素,其他属性默认为根元素的子元素 @XmlRo ...

  6. ORACLE数据库学习之SQL性能优化详解

                                                                                    Oracle  sql 性能优化调整 ...

  7. RxJava在Android中使用场景详解

    RxJava 系列文章 <一,RxJava create操作符的用法和源码分析> <二,RxJava map操作符用法详解> <三,RxJava flatMap操作符用法 ...

  8. Android View框架总结(七)View事件分发机制

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52282833 View布局告一段落,从本篇开始View事件相关分析, ...

  9. XML之DTD(文档类型定义)

    文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 声明元素 在 DTD 中,XML 元素 ...

  10. OpenMP并行化实例----Mandelbrot集合并行化计算

    在理想情况下,编译器使用自动并行化能够管理一切事务,使用OpenMP指令的一个优点是将并行性和算法分离,阅读代码时候无需考虑并行化是如何实现的.当然for循环是可以并行化处理的天然材料,满足一些约束的 ...