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

原文由 Srinivas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须使用 display:inline 和 max-width 对于某些浏览器使用自动换行。有一个很好的教程来创建 css3 工具提示 create css3 tooltip 。

这是该教程中的一些代码：

 .tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
 max-width: 220px;
}

原文由 adi 发布，翻译遵循 CC BY-SA 3.0 许可协议