一对一平台制作,如何实现文本超出显示为省略号?
① 第一步: 溢出隐藏 —— 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>
以上就是一对一平台制作,如何实现文本超出显示为省略号?, 更多内容欢迎关注之后的文章
标签:box,省略号,一对一,超出,webkit,overflow,文本 From: https://www.cnblogs.com/yunbaomengnan/p/18248991