子級絕對定位也受父級寬度的影響
阿新 • • 發佈：2019-02-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.txt{
display: inline-block;
height:30px;
line-height: 30px;
border:1px solid #498fd3;
background: #276AB0;
outline: none;
}
.close{
position: relative;
display: inline-block;
}
.close>.icon{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border:1px solid #498fd3;
background: #276AB0;
}
.close>.span{
display: inline-block;
position: absolute;
top: 30px;
left: 0;
height: 40px;
/*white-space: nowrap;*/
}
.block{
display: inline-block;
}
</style>
</head>
<body>
<div class="block">
<button class="txt">fffffffff</button>
<div class="close">
<span class="icon">×</span>
<span class="span">啊對方噶啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
</div>
</div>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.txt{
display: inline-block;
height:30px;
line-height: 30px;
border:1px solid #498fd3;
background: #276AB0;
outline: none;
}
.close{
position: relative;
display: inline-block;
}
.close>.icon{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border:1px solid #498fd3;
background: #276AB0;
}
.close>.span{
display: inline-block;
position: absolute;
top: 30px;
left: 0;
height: 40px;
/*white-space: nowrap;*/
}
.block{
display: inline-block;
}
</style>
</head>
<body>
<div class="block">
<button class="txt">fffffffff</button>
<div class="close">
<span class="icon">×</span>
<span class="span">啊對方噶啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
</div>
</div>
</body>
</html>
想要文字在一行顯示把white-space放開，但是隻能是文字，顯示不受寬度影響