<#def title = "文本样式"/> <#def keyword = "ZhiqimUI"/> <#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/> <#def prevUrl = "font.htm"/> <#def nextUrl = "block.htm"/> ${zhiqim_com_head()} ${zhiqim_com_head_main()} ${zhiqim_com_head_end()} ${zhiqim_com_mobileUI_scrollJs()} ${zhiqim_com_body()} ${zhiqim_com_topnav("ui")}
${zhiqim_com_container_ui("ZmUI", "css", "text")}
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "文本样式")}
<#-- 标题 -->

文本样式：

文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。

<#-- 一、粗斜体上下标和删除线下划线文本 -->
一、粗斜体、上下标、删除线、下划线、标记字体、缩写效果等标签样式和定义样式
名称 样式 举例 说明
b 
b{font-weight:bold;}
 微软雅黑字体 粗体
i 
i{font-style:italic;}
 微软雅黑字体 斜体
u 
u{text-decoration:underline;}
 带下划线文本效果 下划线体
del 
del{text-decoration:line-through;}
 带删除线文本效果 删除线体
small 
small{font-size:80%;}
 这里是小号文本效果 小号体，80%
sup 
sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}
sup{top:-0.5em;}
 文本上标效果superscript 上标
sub 
sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}
sub{bottom:-0.25em;}
 文本下标效果subscript 下标
mark 
mark{background:#ff0;color:#000;}
 这里是标记字体效果 标记体，颜色为通用的黑色+黄底#ffff00
abbr[title] 
abbr[title]{border-bottom:1px dotted;}
@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}
 这里是MSYH缩写效果 缩写体，显示下划虚线，firefox原来就有，所以要用hack去掉
.z-bold 
.z-bold{font-weight:bold;}
 这里是字体加粗效果 粗体
.z-italic 
.z-italic{font-style:italic;}
 这里是文本斜体效果 斜体
.z-underline 
.z-underline{text-decoration:underline;}
 带下划线文本效果 下划线体
.z-delline 
.z-delline{text-decoration:line-through;}
 带删除线文本效果 删除线体
.z-weight-normal 
.z-weight-normal{font-weight:normal;}
 粗体正常 普通大小
.z-style-normal 
.z-style-normal{font-style:normal;}
 斜体正常 普通样式
.z-small 
.z-small{font-size:80%;}
 这里是小号文本效果 小号体，80%
.z-sup 
.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}
 文本上标效果superscript 上标
.z-sub 
.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}
 文本下标效果subscript 下标
.z-mark 
.z-mark{background:#ff0;color:#000;}
 这里是标记字体效果 标记体，颜色为通用的黑色+黄底#ffff00
.z-abbr[title] 
.z-abbr[title]{border-bottom:1px dotted;}
 这里是MSYH缩写效果 缩写体，显示下划虚线
<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
二、文本换行、不换行、省略和隐藏等属性
名称 样式 举例 说明
.z-text-break 
.z-text-break{word-break:break-all; word-wrap:break-word;}
 Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions. 国人是不管英文是不是单词的，直接换行
.z-text-pre 
.z-text-pre{white-space:pre;}
 第一行第一行第一行第一行第一行 第二行 第三行 保留空白符列表，类似于<pre>，每行nowrap，撑大
.z-text-prewrap 
.z-text-prewrap{white-space:pre-wrap;}
 第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
第二行
第三行
 		保留空白符列表，超时自动换行。
.z-text-preline 
.z-text-preline{white-space:pre-line;}
 第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行
第二行
第三行
 		合并空白符列表，但是保留换行符。如果第一个字符是\n，<pre>会清理，.z-text-preline不会，需借助JS删除该字符，:first-line设置行高为0时IE/Webkit可以,Firefox不行
.z-text-nowrap 
.z-text-nowrap{white-space:nowrap;}
 Except as required by law or in writing, the so 不换行，会把td撑大，直到遇到
标签为止。
.z-text-ellipsis 
.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}
 Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions. 超过的显示省略号，缺点是必须指定宽度，且只能是一行
.z-text-ellipsis
.z-text-ellipsis-line
.z-text-ellipsis-2line
.z-text-ellipsis-3line
 
.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word;-webkit-line-clamp:1;}
 Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions. 超过的显示省略号，为展示效果，最好依需要显示的行数指定行高、高度
因PC端兼容性较差，仅在 ZmUI 中定义
.z-text-clip 
.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}
 Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions. 超过的省略也不显示省略号，缺点是必须指定宽度，且只能是一行
<#-- 三、正文文本对齐方式 -->
三、正文文本对齐方式，其中z-为常用，zi-为优先
名称 样式 举例 说明
.z-text-left 
.z-text-left{text-align:left;}
 文本左对齐
文本左对齐		 左对齐
.z-text-center 
.z-text-center{text-align:center;}
 文本居中对齐
文本居中对齐		 居中对齐
.z-text-right 
.z-text-right{text-align:right;}
 文本右对齐
文本右对齐		 右对齐
以下为文本对齐优先
.zi-text-left 
.zi-text-left{text-align:left !important;}
 文本左对齐
文本左对齐		 左对齐
.zi-text-center 
.zi-text-center{text-align:center !important;}
 文本居中对齐
文本居中对齐		 居中对齐
.zi-text-right 
.zi-text-right{text-align:right !important;}
 文本右对齐
文本右对齐		 右对齐
<#-- ；四、标题样式（h1-h3） -->
四、标题样式（h1-h3）
名称 样式 举例 说明
h1 
h1{font-size:2em;margin:.67em 0;}

微软雅黑字体，24号字体
微软雅黑字体，24号字体

 H1字体，上下边距14px
h2 
h2{font-size:1.5em;margin:.83em 0;}

微软雅黑字体，22号字体
微软雅黑字体，22号字体

 H2字体，上下边距14px
h3 
h3{font-size:1.17em;margin:1em 0;}

微软雅黑字体，20号字体
微软雅黑字体，22号字体

 H3字体，上下边距14px
.z-h1 
.z-h1{font-size:0.32rem;line-height:normal;font-weight:bold;display:block;margin:0.2rem 0;}
 微软雅黑字体，24号字体
微软雅黑字体，24号字体		 模拟H1，当H1被覆盖时可以使用z-h1
.z-h2 
.z-h2{font-size:0.24rem;line-height:normal;font-weight:bold;display:block;margin:0.19rem 0;}
 微软雅黑字体，22号字体
微软雅黑字体，22号字体		 模拟H2，当H2被覆盖时可以使用z-h2
.z-h3 
.z-h3{font-size:0.18rem;line-height:normal;font-weight:bold;display:block;margin:0.18rem 0;}
 微软雅黑字体，20号字体
微软雅黑字体，20号字体		 模拟H3，当H3被覆盖时可以使用z-h3
<#-- 五、文本编码样式 -->
五、文本编码样式（编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑"）
名称 样式 举例 说明
samp
.z-samp		 
        samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
samp{font-family:"Courier New"}

.z-samp{border-radius:4px;} 		无背景编码字体
kbd
.z-kbd		 
        kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        kbd,.z-kbd{border-radius:4px;}
        kbd,.z-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);}
kbd{font-family:"Courier New"}

.z-kbd{border-radius:4px;} 		黑背景白字键盘输入字体
pre
.z-pre		 
        pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        pre{border-radius:4px;}
        pre{overflow:auto;display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #cccccc;}
        pre code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
    
        pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
.z-pre{border-radius:4px;} 		预处理标记，默认是单行撑大、留白，这里增加了.z-text-preline，改为单行换行，留白合并

显示红色的为里面使用<code>封装
code
.z-code		 
        code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
        code,.z-code{border-radius:4px;}
        code,.z-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;}
        pre code,.z-pre .z-code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}

.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}

code{border-radius:4px;} 		编码标记，默认是自动换行，且不保留空白

外边框是在显示红色的为使用<pre>内进行封装
${zhiqim_turorial_ZmUI_demo_start()}
ZhiqimUI.mobile
文案 文案 文案 文案
这里是内容
${zhiqim_turorial_ZmUI_demo_end()}
${zhiqim_com_chapter()}
${zhiqim_com_footer()}