CSS3：工具提示最大宽度与自动换行

Question

尝试在jsfiddle中的工具提示文本换行的情况下应用最大宽度，但它应用默认宽度。

HTML：

<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>

CSS：

.tooltip{
display: inline;
position: relative;
white-space: pre-wrap;       /* css-3 */
margin: 20px 20px 20px 20px; 
height: 30px;  
width: 50px
 }

.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}

.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

当工具提示中的文本自动换行时，宽度应增加到某个最大宽度而不是默认宽度，以便于阅读。

当我放置 display: inline-table; 时，这个jsfiddle可以工作。像下面这样

.tooltip:hover:after{
 :
 :
display: inline-table;
}

但它只适用于 Chrome，不适用于 IE

Answer 1

请更改您的 CSS 最小宽度和最大宽度，如下所示：

.tooltip:hover:after{
    background: #8FBC8F;
    border-radius: 5px;
    bottom: 26px;
    color: #000;
    content: attr(tip);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width:auto;
    min-width:500px; /* I have changed here */
    max-width:500px;
}