一, 下面是纯 CSS 实现固定行超出内容显示点点的四种实现方法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name=viewport content="width=device-width,minimum-scale=1,maximum-scale=1">
- <title > 固定行超出内容显示点点 </title>
- <style type="text/css">
- *{padding: 0;margin: 0;}
- .panel {
- font-size: 18px;
- display: inline-block;
- margin-left: 20px;
- padding: 1em;
- box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
- }
- .panel p {
- width: 200px;
- overflow: hidden;
- text-align: justify;
- }
- /* 第一种实现方法 -- 适合单行 */
- .single-line {
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- /* 第二种实现方法 --webpack 打包后将不支持 - webkit-box-orient 这个属性 */
- .multi-line {
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- }
- /* 第三种实现方法 -- 可以根据行数来显示点点, 但是最后一行不满时也会显示点点 */
- .gradient {
- position: relative;
- line-height: 1.2em;
- max-height: 2.4em;
- overflow: hidden;
- }
- .gradient::after {
- content: "...";
- position: absolute;
- bottom: 0;
- right: 0;
- background: linear-gradient(to right, transparent, white 55%);
- padding-left: 1em;
- }
- /* 第四种实现方法 -- 目前经测试最好的一种实现方法 */
- .higher-gradient {
- overflow: hidden;
- position: relative;
- line-height: 1.2em;
- max-height: 2.4em;
- margin-right: -1em;
- padding-right: 1em;
- }
- .higher-gradient:before {
- content: '...';
- position: absolute;
- right: 0;
- bottom: 0;
- padding-left: 1em;
- background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
- background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
- background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
- }
- .higher-gradient:after {
- content: '';
- position: absolute;
- right: 0;
- width: 1em;
- height: 1em;
- margin-top: 0.2em;
- background: white;
- }
- </style>
- </head>
- <body>
- <div class="panel">
- <p class="ellipsis single-line">Hello this is a test, just a test.</p>
- <p class="ellipsis single-line"> 这是一个测试, 只是一个测试.</p>
- </div>
- <div class="panel">
- <p class="ellipsis multi-line">Hello this is a test, just a test. Hello this is a test, just a test.</p>
- <p class="ellipsis multi-line"> 这是一个测试, 只是一个测试. 这是一个测试, 只是一个测试.</p>
- </div>
- <div class="panel">
- <p class="gradient">Hello this is a test, just a test. Hello this is a test, just a test.</p>
- <p class="gradient"> 这是一个测试, 只是一个测试.</p>
- </div>
- <div class="panel">
- <p class="higher-gradient">Hello this is a test, just a test. Hello this is a test, just a test.</p>
- <p class="higher-gradient"> 这是一个测试, 只是一个测试.</p>
- </div>
- </body>
- </html>
ps: 需要注意一点的是伪类 before 设置背景颜色的时候要按照上面的写, 否则 iPhone 手机的浏览器都会显示不正常的
本文参考资料链接:
- https://github.com/NoName4Me/yo-FE/issues/3
- https://codepen.io/blurnull/pen/YLbrPY
来源: http://www.qdfuns.com/article/18313/837af3570e8dbb0c32f3631db22eaa82.html