Html 文本悬停弹出窗口不希望使用最大宽度

最好用例子来说明

示例1（）：

HTML:

例2（）：

HTML

---

似乎没有一个明显的选项允许文本扩展弹出窗口并遵守最大宽度。

这似乎是不可能的。我的最佳折衷方案是添加

overflow-x:auto
如果我正确理解了您的问题，您可以设置任意宽度的最大值，然后将宽度设置为“自动”吗

例如：

.my_popup {
display:            none;
position:           absolute;
background-color:   white;
border:             1px solid black;
left:               0px;
padding:            4px;
max-width:          256px;
width:              auto;
}

@仓鼠抱歉错过了这一部分，在这个例子中，去掉nowrapIt和去掉“宽度”没有什么不同。
.my_popup {
    display:            none;
    position:           absolute;
    background-color:   white;
    border:             1px solid black;
    left:               0px;
    padding:            4px;
    max-width:          256px;
}
span:hover .my_popup {
    display:            block;
    white-space:        nowrap;
    z-index:            2;
}

blah blah blah <span style="position:relative;">@blah<span class="my_popup">removing 'white-space:nowrap' and using a fixed 'width' solves this, but only for large amounts of text that spill past the popup's width</span></span> blah blah
<br>&nbsp;<br>
however, when we try to use small <span style="position:relative;">@amount<span class="my_popup">wat</span></span> of text with a fixed 'width', we so fat

.my_popup {
    display:            none;
    position:           absolute;
    background-color:   white;
    border:             1px solid black;
    left:               0px;
    padding:            4px;
    width:          256px;
}

span:hover .my_popup {
    display:            block;
    z-index:            2;
}

.my_popup {
display:            none;
position:           absolute;
background-color:   white;
border:             1px solid black;
left:               0px;
padding:            4px;
max-width:          256px;
width:              auto;
}