给元素加一个display:table;就好了。
代码在这：https://codepen.io/cuteyangya...
<!DOCTYPE html><html><head> <title></title><style type="text/css"> .outer,outer2{ width: 100px; overflow: hidden; } .inner{ white-space: nowrap; } .inner2{ white-space: nowrap; display: table; } </style></head><body> <div class="outer"> <div class="inner">很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。</div> </div> <div class="outer"> <div class="inner2">很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。很长的文字。</div> </div> <script type="text/javascript"> console.log(document.querySelector('.inner').offsetWidth) // 100 console.log(document.querySelector('.inner2').offsetWidth) // 1536 </script></body></html>或者改成
float: left
position: absolute
display: inline-block
参考链接：
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://stackoverflow.com/que...