文档章节

图解 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
深圳
程序员
常见 MIME 类型

序号 内容类型 文件扩展名 描述 1 application/msword doc Microsoft Word 2 application/octet-stream bin dms lha lzh exe class 可执行程序 3 application/pdf pdf Adobe Acrobat 4 appl......

Koma
2015/12/29
133
0
非常有用的 Markdown 编辑器和工具

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

oschina
2014/04/02
107.8K
25
各种Linux操作系统版本安装图解教程下载

以下链接如一时无法下载到请稍候再连接。 一般情况下都永久有效,保证能下载的。 红旗Linux图解安装教程 CHM 下载:ftp://FTP_hllinux:123456@211.95.73.26/linux/redflag6.chmPDF 下载:ftp...

zt371
2009/05/08
608
0
类似visio的拓扑图节点连线控件免费下载

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

yidongkaifa
2014/10/17
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
0
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
2
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部