文档章节

图解 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
深圳
程序员
非常有用的 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
HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4...

别叫小伙
2016/09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache Spark 2.3 重要特性介绍

本文翻译自:https://databricks.com/blog/2018/02/28/introducing-apache-spark-2-3.html 为了继续实现 Spark 更快,更轻松,更智能的目标,Spark 2.3 在许多模块都做了重要的更新,比如 St...

hblt-j
6分钟前
0
0
Git基本操作

Git基本操作 git add . git commit git commit -m "updata" git log查看日志 git checkout xxx 切换分支到xxx 常用命令 版本库管理 创建版本库 # 初始化版本库mkdir learngit && cd learng...

lslaiwy
9分钟前
0
0
ubuntu 彻底删除 mysql 然后重装 mysql

ubuntu 彻底删除 mysql 然后重装 mysql 删除 mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt-get autoremove mysql-server sudo apt-......

关上越
12分钟前
0
0
Fabric.js高级点的教程3--添加遮罩和裁剪的方法

写这篇文章的时候我就要说一下了,这个遮罩和裁剪耗费了我真的是九牛二虎之力 裁剪的插件很多,无论你用原生JS,JQuery, Vue还是React.总能找到一款裁剪插件。今天我要说的是自己写一个截图功...

xmqywx
15分钟前
0
0
springboot 初始化不设置数据源 由接口动态设置数据源(传入ip 端口 数据库名称 账号 密码)

程序无需重启可以加个过滤器支持未设置数据库无法调用将配置存到property文件,也可存到缓存设置时需要一个工具类判断传入的数据库是否可连接等import org.apache.commo...

林伟琨
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部