从零开始学习前端开发 — 4、容器溢出
2018-06-24 02:09:19来源:未知 阅读 ()
一、容器溢出
语法:overflow: visible | hidden | scroll | auto | inherit;
- visible:默认值,溢出内容不会被裁剪,正常显示
- hidden: 溢出内容隐藏不可见
- scroll: 当容器溢出时,溢出的内容以滚动条的形式查看(当容器没有溢出时,也会显示一个默认的滚动条)
- auto: 当容器溢出时,以滚动条的形式查看剩余内容,没有溢出时,不会显示滚动条
- inherit:规定继承父元素的overflow属性
注:还可以针对某一个方向的溢出做设置
语法:overflow-x:visible|hidden|scroll|auto; (水平方向溢出设置) overflow-y:visible|hidden|scroll|auto; (垂直方向溢出设置)
二、文本溢出设置
语法:text-overflow:clip(默认值) | ellipsis;
- clip:不显示省略号,简单的裁剪
- ellipsis:显示省略号
三、省略号的设置
必须满足四个条件,缺一不可:
1)设置一定的宽度 width:value;
2)设置文本强制在一行显示 white-space:nowrap;
3)文本溢出隐藏 overflow:hidden;
4)溢出显示省略号 text-overflow:ellipsis;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省略号设置</title>
<style type="text/css">
p{
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>测试数据测试数据测试数据测试数据测试数据</p>
</body>
</html>
浏览器显示效果:
注:上述设置方法主要针对单行文本显示省略号,如果遇到多行文本需要显示省略号一般由后端来做处理
扩展
white-space:normal|nowrap|pre|pre-wrap|pre-line;
normal:默认值,空白符会被浏览器忽略
nowrap:不换行,强制在一行显示
pre: 强制在一行显示,保留空白符
pre-wrap: 保留空白符,自动换行
pre-line:合并空白符,保留换行符
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端程序员容易忽视的一些基础知识
下一篇:CSS实现两栏布局
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash