一对一平台制作，如何实现文本超出显示为省略号？

一对一平台制作，如何实现文本超出显示为省略号？
① 第一步： 溢出隐藏 —— 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;

单行文本

<style>
 .box {
     width: 400px;
     height: 30px;

     /*第一步： 溢出隐藏 */
     overflow: hidden;
     /* 第二步：让文本不会换行， 在同一行继续 */
     white-space: nowrap;
     /* 第三步：用省略号来代表未显示完的文本 */
     text-overflow: ellipsis;
  }
</style>

 

多行文本

 <style>
  .box {
     /* 限定范围 */
     width: 300px;
     height: 40px;
 
     /* 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>

 

以上就是一对一平台制作，如何实现文本超出显示为省略号？， 更多内容欢迎关注之后的文章