超过一行省略号（文本超出部分显示省略号）
我们经常在网站上可以看到以下样式 ，标题太长 ，一行显示不下 ，则会使用省略号来代替 。但是事实上 ，这个省略号并不是打字打上去的 ，而是使用代码表示出来的 。
今天则主要介绍如何让文本超出部分显示省略号 。
1.单行文本超出部分显示省略号
1.1 语法
<style> .box { width: 400px; height: 30px; border: 1px solid red; /*第一步： 溢出隐藏 */ overflow: hidden; /* 第二步：让文本不会换行 ， 在同一行继续 */ white-space: nowrap; /* 第三步：用省略号来代表未显示完的文本 */ text-overflow: ellipsis; } </style> <body> <h3 class="box"> 生活如此美好 ，我们要积极面对 ，迎难而上 ，没有什么是过不去的坎 ，坚持就是胜利！ </h3> </body>具体效果如下：
1.2 具体步骤
①第一步： 溢出隐藏 —— overflow: hidden;
②第二步：让文本不会换行 ， 在同一行显示——white-space: nowrap;
③第三步：用省略号来代表未显示完的文本 ——text-overflow: ellipsis;
2. 多行超出部分显示省略号
在实际中 ，除了上面那种单行省略号以外 ，还有这种在第二行甚至更多行后 ，超出部分的文字再显示省略号 。
2.1 语法
<style> .box { /* 限定范围 */ width: 300px; height: 40px; border: 1px solid red; /* 1.溢出隐藏 */ overflow: hidden; /* 2.用省略号来代替超出文本 */ text-overflow: ellipsis; /* 3.设置盒子属性为-webkit-box 必须的 */ display: -webkit-box; /* 4.-webkit-line-clamp 设置为2 ，表示超出2行的部分显示省略号 ，如果设置为3 ，那么就是超出3行部分显示省略号 */ -webkit-line-clamp: 2; /* 5.字面意思：单词破坏：破坏英文单词的整体性 ，在英文单词还没有在一行完全展示时就换行 即一个单词可能会被分成两行展示 */ word-break: break-all; /* 6.盒子实现多行显示的必要条件 ，文字是垂直展示 ，即文字是多行展示的情况下使用 */ -webkit-box-orient: vertical; } </style> <body> <div class="box"> 生活不易 ，且行且珍惜 。待人多点耐心 ，不要急急燥燥 ，对自己也宽容点 ，不要过分为难自己 ，活着开心就好！ </div> </body>具体效果如下：
2.2 具体步骤
①第一步： 溢出隐藏 —— overflow: hidden;
②第二步：用省略号来代表未显示完的文本 ——text-overflow: ellipsis;
③第三步：必须设置盒子属性为-webkit-box——display: -webkit-box;
④第四步：设置超出几行后 ，超出部分显示省略号 ，比如-webkit-line-clamp：2； ，则表示超出2行的部分显示省略号 ，如果设置为3 ，那么就是超出3行部分显示省略号
⑤第五步：单词破坏：主要用于破坏英文单词的整体性 ，即在英文单词还没有在一行完全展示时就换行 ，简单的理解就是一个单词可能会被分成两行展示——word-break: break-all;
⑥第六行：盒子实现多行显示的必要条件 ，文字垂直展示——-webkit-box-orient: vertical;
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！