提示＆＃39; max-width在Firefox 38中不起作用，但在Chromium

Question

我有输入的工具提示，我试图设置max-width，或基本上

  

＆＃34;如果文本小于300px，则工具提示宽度应为   包含元素所必需的。如果文本占用超过   300px，换行并包含它。＆＃34;

在这个小提琴中：http://jsfiddle.net/hrfz442d/11/适用于Chromium，但在Firefox 38中，它不会考虑帐户max-width，并且似乎有一个固定的宽度，它正在使用。< / p>

Firefox JSFiddle：

CSS：

.tooltip {
    position: relative;
    display: inline;
}
.tooltip span {
    position: absolute;
    /*min-width: 100px;*/
    max-width: 150px;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;

    display: table;
    padding: 0 10px; /* optional */
}
.tooltip span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-right: 8px solid #327FBA;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.tooltip:hover span {
    visibility: visible;
    opacity: 0.9;
    left: 100%;
    top: 50%;
    margin-top: -16px;
    margin-left: 15px;
    z-index: 999;
}

HTML：

<div class="tooltip">
     <input type="text" placeholder="Nombre/s" name="dp_nombre">
     <span>Nombre completo asd as dasd as dasd</span>
</div>

编辑：事实上，我将工具提示的单词更改为a a a a，并且Firefox使用较小的宽度来包含单词，然后在每个单词（字母）后换行，所以我现在有4行。

Answer 1

添加宽度：100％，并删除display：table（您不需要它）。