一些不常用但实用的css

table自动合并边框

table{
    border-collapse: collapse;
}

div文本超出隐藏+...

单行隐藏
overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行
多行隐藏
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)

-webkit-line-clamp:2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。

计算属性

width: calc(100%/3 - 5px) //兼容性良好
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,048评论 1 4
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,621评论 32 459
  • 硅谷最新投资趋势!附9个创新建议 硅谷在发生什么?有哪些改变世界、改变人类生活状态的新科技正在涌现? 高超音速的旅...
    lashengcheng阅读 352评论 0 1
  • 本周回顾: 1. 自我实现的预言:人一旦开口说话,就要为自己的话语想方设法的证明,证明自己是对的。 自我实现的预言...
    杨雪雪阅读 208评论 0 0