html - 工具提示的最大宽度在 Firefox 38 中不起作用，但在 Chromium 中起作用

Question

我有一个输入的工具提示，我正在尝试设置一个 max-width，或者基本上是

"If the text is smaller than 300px, tooltip width should be the necessary to contain the element. If the text occupies more than 300px, line break and contain it."

在这个 fiddle 中:http://jsfiddle.net/hrfz442d/11/它适用于 Chromium，但在 Firefox 38 中，它没有考虑 max-width，并且似乎有一个它正在使用的固定宽度。

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

添加 width: 100%，并删除 display: table(你不需要它)。