子级绝对定位也受父级宽度的影响

2017-2-10来源:心得技巧人气:1124

<!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">&times;</span>     <span class="span">啊对方噶啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>    </div>     </div>     </body>

</html>

想要文字在一行显示把white-space放开,但是只能是文字,显示不受宽度影响