css3设置单行超出部分省略号,两行省略号,三行省略号,多行省略号

效果如图

代码如下,多行时可根据要求修改-webkit-line-clamp值:

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>超出部分省略问题</title><style>.contentTxt {width: 300px;height: 800px;border: 1px solid red;}/* 超出单行省略 */.oneRow {width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/* 超出两行省略 */.twoRow {width: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}/* 超出三行省略 */.threeRow {width: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}</style></head><body><div class=\"contentTxt\"><h3>单行超出部分省略</h3><p class=\"oneRow\">默认使用 require(\'echarts\') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p><h3>超出二行省略</h3><p class=\"twoRow\">默认使用 require(\'echarts\') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p><h3>超出三行省略</h3><p class=\"threeRow\">默认使用 require(\'echarts\') 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p></div></body></html>