Ellipsis 省略

使用说明

本框架使用纯css制作了4中省略方式：单行省略，两行省略，三行省略，超字数省略。

使用ax-ell类表示单行省略。

                            <div class="ax-ell">文字</div>

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

多行省略

本框架使用了5种省略字号。注意，本着用纯css完成项目原则，由于低版本firefox对多行省略号不支持，需要用户升级到高版本可解决。

subject：标题18px，对应行高是28px。
title：标题16px，对应行高是22px。
body：简介14px，对应行高是22px。
des：简介14px，对应行高是18px。
ignore：小字12px，对应行高是16px。

使用ax-ell-subject类表示单行项目省略；使用ax-ell-2-subject样式表示两行项目省略；使用ax-ell-3-subject样式表示三行项目省略。

                            <div class="ax-ell-subject">文字</div>
                            <div class="ax-ell-2-subject">文字</div>
                            <div class="ax-ell-3-subject">文字</div>

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。

使用ax-ell-title类表示单行正文省略；使用ax-ell-2-title样式表示两行正文省略；使用ax-ell-3-title样式表示三行正文省略。

使用ax-ell-body类表示单行正文省略；使用ax-ell-2-body样式表示两行正文省略；使用ax-ell-3-body样式表示三行正文省略。

                            <div class="ax-ell-body">文字</div>
                            <div class="ax-ell-2-body">文字</div>
                            <div class="ax-ell-3-body">文字</div>

使用ax-ell-des类表示单行简介省略；使用ax-ell-2-des样式表示两行简介省略；使用ax-ell-3-des样式表示三行简介省略。

                            <div class="ax-ell-des">文字</div>
                            <div class="ax-ell-2-des">文字</div>
                            <div class="ax-ell-3-des">文字</div>

使用ax-ell-ignore类表示单行小字省略；使用ax-ell-2-ignore样式表示两行小字省略；使用ax-ell-3-ignore样式表示三行小字省略。

                            <div class="ax-ell-ignore">文字</div>
                            <div class="ax-ell-2-ignore">文字</div>
                            <div class="ax-ell-3-ignore">文字</div>

IE不支持多行省略。

参数汇总

类样式	说明
ax-ell	默认单行省略，跟随父层的字号和行高；
ax-ell-2	默认两行省略，跟随父层的字号和行高；
ax-ell-3	默认三行省略，跟随父层的字号和行高；
ax-ell-subject	项目单行省略，字号18px，行高28px；
ax-ell-2-subject	项目两行省略，字号18px，行高28px；
ax-ell-3-subject	项目三行省略，字号18px，行高28px；
ax-ell-title	标题单行省略，字号16px，行高22px；
ax-ell-2-title	标题两行省略，字号16px，行高22px；
ax-ell-3-title	标题三行省略，字号16px，行高22px；
ax-ell-body	主体单行省略，字号14px，行高22px；
ax-ell-2-body	主体两行省略，字号14px，行高22px；
ax-ell-3-body	主体三行省略，字号14px，行高22px；
ax-ell-des	简介单行省略，字号14px，行高18px；
ax-ell-2-des	简介两行省略，字号14px，行高18px；
ax-ell-3-des	简介三行省略，字号14px，行高18px；
ax-ell-ignore	小字单行省略，字号12px，行高16px；
ax-ell-2-ignore	小字两行省略，字号2px，行高16px；
ax-ell-3-ignore	小字三行省略，字号12px，行高16px；
ax-ell-more	自定义字数省略，默认60个字符；

超字数省略PLUGIN

使用ax-more-ell类表示超字数省略。默认显示60个字，简单使用data-num属性可以控制显示字数。

                            <div class="ax-more-ell" data-num="">文字</div>

另外用户可通过js进行参数设置。根据自己需要设置字符长度，除了字符长度之外还可以设置“更多”按钮的文字和样式，使用方法如下:

                            <script type="javascript">
                               $(document).ready(function () {
                                   $("#div").axEll({
                                      textLength: "60",
                                      foldText: "收起",
                                      unfoldText: "全部",
                                      btnClass: "ax-color-primary",
                                   });
                              });
                            </script>

参数汇总

名称	类型	默认值	说明
textLength	string	60	默认60个字符；等同于data-num=''属性；标签属性优先，js属性次之，建议不要叠加使用。
foldText	text	收起	展开时候的指示文字，等同于标签data-fold=''属性；标签属性优先，js属性次之，建议不要叠加使用。
unfoldText	text	全部	折叠时候的指示文字，等同于标签data-unfold=''属性；标签属性优先，js属性次之，建议不要叠加使用。
btnClass	string	ax-color-primary	指示文字的类名，等同于标签data-class=''属性；标签属性优先，js属性次之，建议不要叠加使用。