文档章节

图解 CSS (6): text - 文本格式

涂孟超
 涂孟超
发布于 2014/09/26 15:37
字数 480
阅读 10
收藏 0
line-height
word-spacing
letter-spacing
text-align
vertical-align
text-indent
white-space
word-wrap
word-break
text-transform
direction
unicode-bidi
writing-mode
text-decoration
text-underline-position
text-justify

layout-flow
layout-grid
layout-grid-mode
layout-grid-type
layout-grid-line
layout-grid-char
layout-grid-char-spacing 

已废弃的或测试失败的:
text-shadow
text-autospace
text-kashida-space

 
 
 
 
 

 

 

  

line-height(行高): normal(默认)、数值或百分比.



word-spacing(字间距): normal(默认)、数值或百分比.



letter-spacing(字符间距): normal(默认)、数值.



text-align(横向对齐): left(默认)、right、center、justify(两端对齐).






vertical-align(纵向对齐):
baseline(基线)、top、text-top、bottom、text-bottom、middle、sub(下标)、super(上标)、数值或百分比.

baseline 对齐是默认:


没看出 top 和 text-top 的区别:


bottom 和 text-bottom 应该差不多, 但 bottom 好像不对劲:


middle、sub、super:




还可以使用数值或百分比:



text-indent(段首缩进):


white-space: normal(默认)、pre(IE下无效)、nowrap(禁止自然换行).




word-wrap: normal(默认)、break-word(根据边界换行).




word-break(控制单词换行):
normal(默认, 换行是考虑英文单词边界)、
break-all(不管单词边界根据容器大小换行)、
keep-all(这个厉害, 容不下中文的一句话就换行; 句子是用空白和标点区分的).





text-transform(大小写控制): none(默认)、capitalize(首字母大写)、uppercase(全大写)、lowercase(全小写).






direction(ltr、rtl) 与 unicode-bidi(normal、bidi-override、embed)





writing-mode: lr-tb(默认)、tb-rl.




text-decoration: none、underline(下画线)、overline(上画线)、line-through(中画线)、blink(闪烁, IE 不支持).





text-underline-position: above、auto、auto-pos、below.
text-underline-position 存在的理由应该是让 text-decoration 画的线可以自定义位置, 但现在基本不可用.
只可以把 text-decoration: underline; 指定的下划线弄到上面去, 暂时有点多余.



text-justify: auto、inter-word、inter-ideograph、newspaper、distribute、distribute-all-lines.

这是关于文本两端对齐的更多控制, 需要先: text-align: justify;


没看出 auto、inter-word、inter-ideograph 有区别, 都似默认效果:


newspaper:


distribute:


distribute-all-lines:


:first-letter(单独给首字母定义样式)



:first-line(单独给首行定义样式)



layout-flow: horizontal、vertical-ideographic;




layout-grid-mode: both、line、char、none;
layout-grid-type: loose、strict、fixed;
layout-grid-line: none、auto、length;
layout-grid-char: none、auto、length;
layout-grid-char-spacing : auto、length;



使用 layout-grid 综合设置的顺序是:
layout-grid-mode、layout-grid-type、layout-grid-line、layout-grid-char、layout-grid-char-spacing.



本文转载自:http://www.cnblogs.com/del/archive/2009/01/30/1381450.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2011
码字总数 14107
作品 0
深圳
程序员
私信 提问
各种Linux操作系统版本安装图解教程下载

现在提供目前较多数人用的Linux版本图解安装方法,你可以下载到你机子上细心阅读,做为安装参考。 以下链接如一时无法下载到请稍候再连接。 一般情况下都永久有效,保证能下载的。 红旗Linux...

zt371
2009/05/08
668
0
非常有用的 Markdown 编辑器和工具

Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,所以通过同一个名字它可以使用工具来转换成 HTML。readme 文件,在线论坛编写消息和快速创建富文本文档的文本编辑器都非...

oschina
2014/04/02
120K
23
CSS Text文本格式

text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented......

wybo521
2016/01/13
12
0
类似visio的拓扑图节点连线控件免费下载

Essential Diagram for Windows Forms是一款可扩展的、高性能的.NET平台下的拓扑图控件,可用于开发像Microsoft Visio一样的交互式地绘图和图解应用程序,在节点存储图形对象,支持矢量和光栅...

yidongkaifa
2014/10/17
0
0
W3C 发布 CSS 文本修饰模块规范的首个公开工作草案

2018年3月13日,W3C的CSS工作组(CSS Working Group)发布CSS文本修饰模块(CSS Text Decoration Module Level 4)首个公开工作草案(First Public Working Draft)。该模块包含与文本修饰相...

周其
03/15
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
23分钟前
1
0
支付宝客户端架构分析:自动化日志收集及分析

摘要: 《支付宝客户端架构解析》系列将从支付宝客户端的架构设计方案入手,带领大家进一步了解支付宝在客户端架构上的迭代与优化历程。 小蚂蚁说: 《支付宝客户端架构解析》系列将从支付宝...

阿里云官方博客
26分钟前
1
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
43分钟前
7
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
45分钟前
4
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
48分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部