文字溢出省略文本对齐垂直居中margin合并
2018-05-21 本文已影响3人
饥人谷_黄洪涛
文本超出溢出以及如何添加省略号
一行文本
默认情况下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
width:100px;
border: 1px solid red;
/* white-space:nowrap; */ /*不换行，超出div宽度的文字溢出*/
/* overflow:hidden; */ /* 超出宽度部分自动隐藏 */
/* text-overflow:ellipsis; */ /*超出部分变成省略号*/
}
</style>
</head>
<body>
<div>
hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii nihaoninnnn你好
</div>
</body>
</html>
image
- 第一行没有换行是因为浏览器把它看成一个英文单词
- 所以从现象可以看出默认超出宽度是会换行的
不换行，超出div宽度的文字溢出
恢复white-space:nowrap; 这个属性
image
超出部分隐藏，超出部分变省略号
overflow:hidden;
text-overflow:ellipsis;
image
多行文本
div{
width:100px;
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 3; /*最多显示三行文本，超出就变省略号*/
-webkit-box-orient: vertical;
overflow:hidden;
}
<div>
hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii nihaoninnnn你好范德萨发热管杜莎夫人
</div>
image
多行文本两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
span{
display:inline-block;
width:4em;
text-align:justify; /*文本换行对齐*/
font-size:20px;
line-height:20px;
}
span::after{
content:'';
display:inline-block;
width:100%;
}
</style>
</head>
<body>
<div>
<span>姓名</span> <br>
<span>联系方式</span> <br>
<span>炸弹人</span>
</div>
</body>
</html>
image
文字垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
border: 1px solid red;
line-height:30px;
padding:5px 0
}
</style>
</head>
<body>
<div>
文字垂直居中
</div>
</body>
</html>
image
- 遵循一条原则 能不用height 就别用 ，用padding撑起想要的高度
容器垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
box-sizing:border-box;
}
.dad{
border: 2px solid blue;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.son{
border:3px solid red;
width: 100px;
}
</style>
</head>
<body>
<div class="dad">
<div class="son">
fdksfdlmks sdfefdsfdsfwef
fdfwdfsefrf
dfrefdreg
fefdsgrdsfs
fdefregr
dgersd
gre
dfwe
fd
fe
dfd
erfrgrgfdsrgf
</div>
</div>
</body>
</html>
image
- 新时代前端记住这种用flex 布局来垂直居中，就好了
margin合并
两个div之间的margin合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
box-sizing:border-box;
}
.div1{
border: 1px solid red;
height:100px;
margin:10px 0;
}
.div2{
height:100px;
border:1px solid green;
margin:10px 0;
}
</style>
</head>
<body>
<div class=div1></div>
<div class=div2></div>
</body>
</html>
image
- 两个div 分别给了10px的margin
- 两个div之间的间距按照直觉应该是20px
- 通过开发者工具我们可以看到它们之间只有10px
- 这就说明他们的margin合并了
父子div的margin合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{
box-sizing:border-box;
}
body{
border: 1px solid blue;
}
.dad{
outline: 1px solid red;
margin:10px 0;
}
.son{
height:100px;
border:1px solid green;
margin:20px 0;
}
</style>
</head>
<body>
<div class=dad>
<div class=son></div>
</div>
</body>
</html>
image
- 父元素margin为10px 子元素margin为20px
- 正常的想法应该是子元素在父元素中离父元素边框有20px的间距，而父元素离body的边框有10px的间距
- 通过开发者工具我们可以看到子元素的margin超出了父元素边框并且离body间距是20px
- 这就说明子元素与父元素的margin合并了
- 注意这里父元素的边框线用的是outline
那么为什么呢？
将父元素的边框设置为border，或者给父元素加一padding
image
- 就会发现神奇的好了
在两个div之间再加一个div 设置border或者padding
image
结论
- 因此总结一下就是
- 两个元素的margin合并是因为中间没有阻挡它们的属性就会合并在一起
- 比如说border就是一堵墙，堵在两个margin之间就不会合并了
- 或者说margin碰到关于border/padding这种元素，就是距离这个元素的margin有多少
