单行文本溢出省略号显示

溢出属性

溢出:一个元素有固定宽和高,当里面内容过多时会超出来,这种效果称之为溢出

属性:overflow

取值:

visible  正常显示,可以溢出(默认)

hidden  超出隐藏(溢出部分被剪裁掉)

scroll  添加滚动条

auto  自动,若有溢出添加滚动条,无溢出正常显示无滚动条

overflow-x: ;水平方向上超出

overflow-y: ;垂直方向上超出

剩余空间:

white-space

取值:

normal;  默认,文本自动折行

nowrap;  强制文本一行内显示

pre; 空格、回车皆显示,文本一行内显示

pre-wrap; 文本折行显示,空格、回车皆显示

pre-line;   文本折行显示,并不显示空格

省略号显示

text-overflow:

取值:

clip; 默认,不显示省略号

ellipsis; 显示省略号

单行文本溢出省略号显示(4步)

① 容器有固定宽(width)

② 强制文本在一行内显示

white-space:nowrap;

③ 让超出文本隐藏

overflow:hidden;

④ 添加省略号

text-overflow:ellipsis;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值