overflow溢出隐藏的基本使用
提到overflow我们首先想到的是溢出隐藏,这点并不难理解.我们先回顾一下,overflow的几种取值
/* 默认值 溢出部分可见 */
overflow: visible;
/* 溢出部分隐藏 */
overflow: hidden;
/* 无论是否溢出都显示滚动条 */
overflow: scroll;
/* 根据是否溢出,自动显示滚动条 */
overflow: auto;
这篇文章就是为了告诉小伙伴们,overflow不止以上几种基本用法,下面重点介绍
overflow解决文本溢出的显示样式
这里都是用overflow:hidden;实现的
单行文本溢出
以京东界面为例
这个溢出的省略号显示 就非常神奇的用到了overflow:hidden
具体代码如下:
/* 让文本强制在一行显示,不自动换行*/
white-space:nowrap;
/*溢出部分隐藏*/
overflow:hidden;
/* 文字溢出时用省略号显示*/
text-overflow:ellipsis;
多行文本溢出
同样以京东界面为例:
/* 溢出隐藏 */
overflow:hidden;
/*文字溢出用省略号显示 */
text-overflow:ellipsis;
/* 弹性伸缩盒子模型显示 */
display:-webkit-box;
/* 限制一个块级元素 显示文本的行数 这里举例2行文本*/
-webkit-line-clamp:2;
/* 设置或者检索伸缩盒子对象子元素的排列方式*/
-webkit-box-orient:vertical;
