三道Web前端面试题

匿名网友发布于: 2016-07-20 00:00:00

阅读 152 收藏 0 点赞 0 评论 0

文本内容溢出后用省略号代替显示：

这个可以直接用 text-overflow 来完成，当时竟然没有记起来这个属性。。。兼容 IE / FF / Chrome
```
.text {
 width：100px;
 height: 30px;
 overflow: hidden;
 white-space: nowrap;
 tetx-overflow: ellipsis;
}
```

三列布局，左右两列不定宽，中间自适应：

这道题我的思路是用 flexbox 实现，其实实现的方法也很多，可以使用浮动 / 绝对定位等

  .container {
    position: relative;
    height: 50px;
    border: 1px solid #111;
    line-height: 50px;
  }
  .left,
  .right {
    position: absolute;
    top: 0;
  }
  .left {
    left: 0;
    background-color: darkkhaki;
  }
  .right {
    right: 0;
    background-color: cadetblue;
  }

鼠标滑过用户头像时出现一张卡片，鼠标移出头像时卡消失，同时鼠标在卡片上时卡片保持显示状态：

评论列表正在加载评论...

文章目录