• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

html溢出属性

武飞扬头像
Ezr-
帮助3

1.溢出属性

1.溢出属性(容器的)
说明:
overflow:visble/hidden(隐藏)/scroll/auto自动/inherit;

visble:默认值,溢出内容会显示在元素之外;
hidden:溢出属性隐藏;文本裁剪
scroll:滚动溢出内容一滚动方式显示;不溢出也会出现滚动条
auto:如果有溢出属性会添加滚动条,没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值
overflow-x:x轴溢出怎么处理; overflow-y:y轴溢出怎么处理、


/* ::-webkit-scrollbar ,可以实现对滚动条的定制,配合display:none;实现滚动条隐藏 */
  1.  
    ::-webkit-scrollbar{
  2.  
    display:none;
  3.  
    }

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
系列文章
更多 icon
同类精品
更多 icon
继续加载