资讯专栏INFORMATION COLUMN

自定义多行文本溢出方案

Baoyuan / 1097人阅读

摘要:成立多年来,腾讯一直秉承一切以用户价值为依归的经营理念,为亿级海量用户提供稳定优质的各类服务,始终处于稳健发展状态。年月日,腾讯控股有限公司在香港联交所主板公开上市股票代号。

1.单行文本溢出点点点

单行文本溢出是最常见的一种形式,使用text-overflow的ellipsis即可实现点点点,overflow属性也不可少,同时不能让容器换行,否则不会出现点点点

</>复制代码

  1. .ellipsis {
  2. width: 300px;
  3. white-space: nowrap;
  4. text-overflow: ellipsis;
  5. overflow: hidden;
  6. }
2.多行文本溢出点点点

随着内容的增多,单行文本不够用了,多行文本才是用的最多的地方。四个属性缺一不可,最重要的是-webkit-line-clamp,直接定义了要显示的行数,

</>复制代码

  1. .ellipsis {
  2. width: 300px;
  3. display: -webkit-box;
  4. -webkit-box-orient: vertical;
  5. -webkit-line-clamp: 3; /* 自定义的行数 */
  6. overflow: hidden;
  7. }
3.多行文本溢出自定义

点点点是最常见的溢出省略方式,但是21世纪的设计师已经不满足使用点点点的方式来实现省略了,他们还需要在尾部显示更多按钮,点击之后显示全部内容。这个时候就需要想办法了,下面的终极方案实在是精彩,请移步这里,聆听大神讲解,

</>复制代码

  1. //dom结构
  2. 腾讯成立于1998年11月,是目前中国领先的互联网增值服务提供商之一。成立10多年来,腾讯一直秉承“一切以用户价值为依归”的经营理念,为亿级海量用户提供稳定优质的各类服务,始终处于稳健发展状态。2004年6月16日,腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
  3. ...更多

</>复制代码

  1. .ellipsis {
  2. position: relative;
  3. width: 100%;
  4. max-height: 55px; /* h*n */
  5. line-height: 18px; /* h */
  6. overflow: hidden;
  7. width: 300px
  8. }
  9. .ellipsis-container {
  10. position: relative;
  11. display: -webkit-box;
  12. -webkit-box-orient: vertical;
  13. -webkit-line-clamp: 3; /* n */
  14. font-size: 50px; /* w */
  15. color: transparent;
  16. }
  17. .ellipsis-content {
  18. color: #000;
  19. display: inline;
  20. vertical-align: top;
  21. font-size: 16px; /* f */
  22. }
  23. .ellipsis-ghost {
  24. position:absolute;
  25. z-index: 1;
  26. top: 0;
  27. left: 50%;
  28. width: 100%;
  29. height: 100%;
  30. color: #000;
  31. }
  32. .ellipsis-ghost:before {
  33. content: "";
  34. display: block;
  35. float: right;
  36. width: 50%;
  37. height: 100%;
  38. }
  39. .ellipsis-placeholder {
  40. content: "";
  41. display: block;
  42. float: right;
  43. width: 50%;
  44. height: 55px; /* h*n */
  45. }
  46. .ellipsis-more {
  47. position: relative;
  48. float: right;
  49. font-size: 16px; /* f */
  50. width: 50px; /* w */
  51. height: 18px; /* h */
  52. margin-top: -18px; /* -h */
  53. color: red
  54. }

参考:http://hai.li/2017/03/08/css-...
参考:css3 box属性

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113885.html

相关文章

  • 前端文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    sugarmo 评论0 收藏0
  • 前端文章- 收藏集 - 掘金

    摘要:我的职业是前端工程师入门不是应该很简单吗前端掘金入门前端,是一件很难的事吗在今天,我也没有想好一个答案,也不知道怎样给出一个答案。其他不多说了,这次的内容主要深入理解及应用前端掘金几种常见的边框用法。 GitHub 上学习前端开发的资料(不定期更新) - 前端 - 掘金GitHub 上学习前端开发的资料(不定期更新)... JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - ...

    Pocher 评论0 收藏0
  • 移动端的text-overflow多行文本溢出显示省略号(…)

    摘要:大家应该都知道用属性来实现单行文本的溢出显示省略号。但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。,可以用来多行文本的情况下,用省略号隐藏超出范围的文本。 大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 overflow: hidden; te...

    thekingisalwaysluc 评论0 收藏0

发表评论

0条评论

Baoyuan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<