工具提示的最大宽度在 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

添加宽度：100%，并删除显示：table（您不需要）。

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

Tooltips' max-width not working in Firefox 38 but does in Chromium

html

css

firefox

chromium