Ellipsis单行和多行省略

2024-06-19 00:23:08首发，2个月前更新

单行省略和多行省略在文字较多的情况是很有必要的；_ell[-*]样式类表示省略，支持一行或多行省略，多行省略支持文本字号尺寸；多行省略的行高采用em作为单位，以确保字号变大了之后，行间距也响应的改变。

前言

文章有长有短，内容板块有大小，为了避免内容过多撑开板块，需要使用折叠或者省略。通过本框架的样式类可以实现1~3行的纯文本省略，表现形式为：在第一行或最后一行，更多内容将以“...”显示。

css实现文本省略主要依赖以下属性：

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: [2~9];

请注意-webkit前缀，也就是说多行省略只有webkit浏览器下才支持，经测试，所幸目前主流浏览器均支持以上属性。

简单使用

对纯文本元素使用_ell样式类即可（ell为ellipsis缩写）。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。
```
                
                
            
```

多行省略

默认单行省略，可通过使用后缀2~9实现2~9多行省略（保持继承的行高），例如_ell-3表示最多显示3行，超出省略。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

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

字号和行高

默认行高为2em，也就是字体的两倍大，可通过追加_ell-[xxs~xxl]样式类指定字号和行高。

类名	字号	行高	说明	举例
_ell-xxs	12px/1.2rem（h6）	16px/1.6rem（1.33em）	通常用于小字省略	`<div class="_ell-xxs"></div>`
_ell-xs	14px/1.4rem（h5）	18px/1.8rem（1.29em）	通常用于内容简介省略	-
_ell-sm	14px/1.4rem（h5）	22px/2.2rem（1.57em）	通常用于列表省略	-
_ell-md	16px/1.6rem（h4）	22px/2.2rem（1.375em）	通常用小标题省略	-`
_ell-lg	18px/1.8rem（h3）	28px/2.8rem（1.56em）	通常用于板块标题省略	-
_ell-xl	22px/2.2rem（h2）	28px/2.8rem（1.27em）	通常用于板块标题省略	-
_ell-xxl	28px/2.8rem（h1）	34px/3.4rem（1.214em）	通常用最大标题省略	-

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

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

保持容器高度

如果使用了_ell-xxs~_ell-xxl样式，那么行高和容器的高度是可控的，可以使用_ell-hold样式类，以固定容器高度，而不会因为文字少而塌缩。

输出
HTML

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

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

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