文本悬停弹出窗口不想使用最大宽度

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

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

Answer 2

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

例如：

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