html溢出属性
1.溢出属性
1.溢出属性(容器的)
说明:
overflow:visble/hidden(隐藏)/scroll/auto自动/inherit;
visble:默认值,溢出内容会显示在元素之外;
hidden:溢出属性隐藏;文本裁剪
scroll:滚动溢出内容一滚动方式显示;不溢出也会出现滚动条
auto:如果有溢出属性会添加滚动条,没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值
overflow-x:x轴溢出怎么处理; overflow-y:y轴溢出怎么处理、
/* ::-webkit-scrollbar ,可以实现对滚动条的定制,配合display:none;实现滚动条隐藏 */
-
::-webkit-scrollbar{
-
display:none;
-
}
2.空余空间
说明:
white-space:normal/nowrap/pre/pre-wrap/pare-line/inherit
该属性用来设置如何处理元素中的空白;
normal:默认值,空白会被浏览器忽略。
nowrap:文本不会换行,文本会在同一行上继续,直到遇到<br>标签为止;
pre:预格式化文本-保留空格 tab,回车 但不会自动换行
/* 可以用<pre></pre>直接写 */
pre-wrap:会折行但会保留空格
pre-line:只显示回车,不显示空格,换行
inherit:从父元素中继承此属性
3.省略号号显示
说明:
text-overflow:clip/ellipsic;
clip:默认值,不显示省略号(...),
ellipsis:显示省略号
但单行文本溢出显示需要省略号需要同时设置以下声明:
1.容器的宽:width:200px
2.强制文本在同一行显示:white-space:nowrap
3.溢出内容为隐藏属性:overflow:hidden
4.溢出文本显示省略号:text-overflow:ellipsis;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhfgeic
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11