v10_溢出属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v10_溢出属性相关的知识，希望对你有一定的参考价值。
溢出属性overflow : auto
...
.b1
width: 200px;
height: 100px;
background-color: bisque;
/* overflow: visible; 默认值 溢出内容显示在元素之外 */
/* overflow: hidden; 溢出内容隐藏 */
/* overflow: scroll; 溢出内容滚动显示 */
/* overflow: auto; 如果有溢出添加滚动条，没有则正常显示 */
/* overflow: inherit; 继承父元素效果 */
/* overflow-x: auto; overflow-y: hidden; 需要搭配使用 */
</style>
</head>
<body>
<div class="b1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit rem cumque corporis animi libero impedit vero, ab consequuntur soluta.
</div>
空余空间属性 white-space
white-space: // 例如一行字在块中如何显示
nowrap 不换行 ，常用 //不折行+溢出隐藏 配合显示
pre 显示空格 回车 不换行 同pre标签
pre-wrap 显示空格 回车换行
pre-line 显示回车 换行 不显示空格
溢出隐藏中省略号显示
text-overflow: clip 默认值 不显示省略号(...)
ellipsis 显示省略标记
当单文本溢出显示省略号需要同时设置以下声明：
1.容器宽度 width:200px;
2.强制文本在一行内显示 white-space:nowrap;
3.溢出内容为隐藏 overflow:hidden;
4.溢出文本显示省略号 text-overflow:ellipsis
案例：写的页面如图所示，各个块在显示不全的状态下滚动显示，在鼠标划过时有选定显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" cnotallow="IE=edge">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<title>溢出</title>
<style>
*
margin: 0;
padding: 0;
.box
width: 890px;
height: 290px;
background: lavenderblush;
/* margin: left; */
overflow: auto; /*溢出部分滚动显示*/
.info
width: 162px;
height: 112px;
border: 1px solid #808080;
float: left; /*浮动 实现横向排列*/
margin-right: 48px; /*设置小块外边距*/
margin-bottom: 20px;
.info:hover div /*伪类选择器，做鼠标悬停的效果*/
background: #219cea;
.info:hover .price
color: white;
.info:hover .date
color: white;
.info:hover .category
color: #219cea;
background-image: url(./img/icon.png); /*悬停时 添加小图标 设置不平铺 位置调整 */
background-repeat: no-repeat;
background-position: right ;
.info div
height: 84px;
background: #cccccc;
font-size: 12px;
.price
height: 63px;
line-height: 63px; /*标签的行高*/
padding-left: 21px; /*设置标签内边距 实现字体在页面的位置*/
color: #b5b5b5;
.date
padding-left: 21px;
color: #b5b5b5;
.category
height: 28px;
background: white;
line-height: 28px; /*与整个高度齐平 实现垂直方向上居中*/
color: black;
text-align: center;
font-size: 12px;
</style>
</head>
<body>
<div class="box"> <!--外块>小块部分>块[有两个标签]+标签-->
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info"> <!--以下重复多个模块-->
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
<div class="info">
<div id="blk">
<p class="price">100.00</p>
<p class="date">有效期至20210521</p>
</div>
<p class="category">[店铺类][商城类]</p>
</div>
</div>
</body>
</html>
以上是关于v10_溢出属性的主要内容，如果未能解决你的问题，请参考以下文章