资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/伪元素能做好多事

伪元素能做好多事

CKJOKER / 639人阅读

摘要：但是我们总不能把图标和字一起摆出来，所以我们使用伪元素加上字后，将字的调为字就不显示啦真的是好用又方便我是文字图标超长文字的省略号开发过程中，尤其是表格中经常会有这样的需求，文本超多一定长度要隐藏掉，后面跟上三个点表示未完待续。。。

1.图标和文字不对齐

我们经常遇到图标和文字挨着，不管图标怎么调都很难与文字和谐共处一行，很难实现垂直对齐。这个古老的话题有挺多解决方式的，很多人借助复杂的position: absolute硬调，挺麻烦的，还要写很多代码，不过使用伪元素的话，几行就可以搞定啦！

其实本质上我们的图标是被用作背景显示出来的，那么不妨试试在图标的地方放上文本是不是就与其他的对齐了呢，回答是yes。但是我们总不能把图标和字一起摆出来，所以我们使用伪元素加上字后，将字的font-size调为0字就不显示啦！真的是好用又方便！

</>复制代码 
  2. 我是文字
</>复制代码 
  1. // css
  2. .logo {
  3.     width: 16px;
  4.     height:16px;
  5.     background: url(~"@/assets/logo/logo1.svg")
  6.     &::after {
  7.         content: "图标";
  8.         font-size: 0px;
  9.     }
  10. }
2.超长文字的省略号

开发过程中，尤其是表格中经常会有这样的需求，文本超多一定长度要隐藏掉，后面跟上’...‘三个点表示未完待续。。。很多现成的组件已经能够完成这样的需求了。但是有时产品童鞋会提出一些尴尬的需求是现成组件实现不了的，没办法，只能靠我们亲自操刀写组件。。比如这次的转置的表格。。。

so不多说上代码

</>复制代码 
  2.     
  3.                         
  4.             {{data}}
  5.         
  6.     
</>复制代码 
  1. props: {
  2.   data: ""
  3. },
  4. data() {
  5.   return {
  6.     hideMore: false
  7.   }
  8. },
  9. mounted() {
  10.   this.hideMore = this.$refs.tdRef.offsetHeight > 22
  11. }
</>复制代码 
  1. .tb-span {
  2.     &.hide-more {
  3.       padding-right: 20px;
  4.       position: relative;
  5.       display: inline-block;
  6.       height: 18px;
  7.       line-height: 22px;
  8.       width: 100%;
  9.       overflow: hidden;
  10.       &::after {
  11.         position: absolute;
  12.         width: 3em;
  13.         right: 12px;
  14.         top: 0;
  15.         z-index: 5;
  16.         background: linear-gradient(90deg,transparent,#fff,#fff,#fff);
  17.         text-align: center;
  18.         content: "...";
  19.       }
  20.     }
  21.   }
云服务器 GPU云服务器 伪元素 获取伪元素 如何做好网站优化 如何做好邮件营销

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

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

相关文章

  • “标准”让AI的脚步更快

    摘要：今天在上看到了一篇介绍自动标注工具的文章，不禁有些感慨，技术发展的如此之快。前两月我开始接触了公司用的蓝湖，这就是一款可以自动标注的应用，鼠标点到元素上，在右侧就会弹出相关的尺寸颜色等信息，甚至还有样式，这简直是太棒了，大大提高了开发效率。 今天在Segmentfault上看到了一篇介绍psd自动标注工具的文章，不禁有些感慨，技术发展的如此之快。我本身就是一个比较懒惰的人，对于页面开发...

    libxd 评论0 收藏0

  • “标准”让AI的脚步更快

    摘要：今天在上看到了一篇介绍自动标注工具的文章，不禁有些感慨，技术发展的如此之快。前两月我开始接触了公司用的蓝湖，这就是一款可以自动标注的应用，鼠标点到元素上，在右侧就会弹出相关的尺寸颜色等信息，甚至还有样式，这简直是太棒了，大大提高了开发效率。 今天在Segmentfault上看到了一篇介绍psd自动标注工具的文章，不禁有些感慨，技术发展的如此之快。我本身就是一个比较懒惰的人，对于页面开发...

    魏明 评论0 收藏0

  • 「前端早读君006」移动开发必备：那些玩转H5的小技巧

    摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计，无志者只感千难万难。 文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

    LittleLiByte 评论0 收藏0

  • 「前端早读君006」移动开发必备：那些玩转H5的小技巧

    摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光 今日励志语录有志者自有千计万计，无志者只感千难万难。 文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

    liuyix 评论0 收藏0

发表评论

登陆后可评论

0条评论

CKJOKER

男|高级讲师
我要私信

TA的文章

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