文本悬停弹出窗口不希望使用max-width

Question

最好用例子说明

示例1（http://jsfiddle.net/65CU9/1/）：

HTML：

blah blah blah <span style="position:relative;">@blah<span class="my_popup">lots of text could go here but i cant let it be too long omg help me this is out of control ALWAYS I WANNA BE WITH YOU AND MAKE BELIEVE WITH YOU AND LIVE IN HAR-MO-NY HA-MO-NY</span></span> blah blah

CSS：

.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;
}

示例2（http://jsfiddle.net/65CU9/3/）：

HTML

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

CSS

.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;
}

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

Answer 1

如果我理解你的问题，你能设置一个最大宽度：你想要什么，然后将宽度设置为自动吗？

示例：

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

Answer 2

似乎这是不可能的。我最好的妥协解决方案是添加overflow-x:auto;。