当元素是另一个元素的子元素时，设置width = auto似乎没有预期的结果。参见下面的示例-您可以看到“测试一”和“测试二”的宽度受其父div宽度的限制，但是“测试三”可以正确调整其宽度，因为它不是孩子，而是与其相邻的同级兄弟div。
div { background: lightGrey; }
div span { background: beige; }
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .ttPopup, .tooltip + .ttPopup {
display: inline-block;
visibility: hidden;
position: absolute;
width: auto;
left: 100%;
top: 0;
background-color: beige;
border: solid 1px cyan;
text-align: center;
}
.tooltip + .ttPopup {
left: 8%;
top: 20%;
}
.tooltip:hover .ttPopup, .tooltip:hover + .ttPopup { visibility: visible; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="tooltip">Test one
<span class="ttPopup">line 1<br>line 2<br>line 3<br>line 4<br>line 5</span>
</div>
<br><br>
<div class="tooltip">Test two
<span class="ttPopup">
Lorem ipsum dolor sit amet,
<br>consectetur adipiscing elit, sed do
<br>eiusmod tempor incididunt ut labore
<br> et dolore magna aliqua.
</span>
</div>
<br><br>
<div class="tooltip">Test three
</div>
<span class="ttPopup">
Lorem ipsum dolor sit amet,
<br>consectetur adipiscing elit, sed do
<br>eiusmod tempor incididunt ut labore
<br> et dolore magna aliqua.
</span>
</body>
</html>最佳答案
设置width: auto可使元素展开以占据其包含块中的所有可用水平空间。
如果它具有任何水平的填充或边框，则其宽度不会加到元素的总宽度上。
父DIV元素将被视为“包含块”，并且auto不会扩展到该块之外，仅在内容需要时才扩展到该块。