300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 单行文本溢出省略号显示

单行文本溢出省略号显示

时间:2024-04-30 21:42:32

相关推荐

单行文本溢出省略号显示

溢出属性

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

属性: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;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。