三道Web前端面试题

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

这个可以直接用 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;  }

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