html - 工具提示最小高度有效但最小宽度无效

Question

我有一个来自此页面的工具提示:

http://www.cssportal.com/css-tooltip-generator/

我对其进行了调整以应用于输入元素:

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

还有 CSS:

.tooltip {
    position: relative;
    display: inline;
}
.tooltip span {
    position: absolute;
    width: 120px;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px;
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;
}
.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;
}

问题是如果文本长于宽度，它会换行，并且不包含在工具提示背景中。

在 .tooltip span {} 中，我已将 width: 替换为 min-width:，但它不起作用。也尝试使用 width: auto，但工具提示变窄了。

但是，将 height 替换为 min-height DID 会使工具提示背景垂直包含文本。

如何使工具提示包含的文本最大为 300 像素？ (使用最大宽度)然后换行并保持垂直包含它。

谢谢。

http://jsfiddle.net/hrfz442d/

Answer 1

只需添加一个 max-width 但添加 display:table

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

Jsfiddle Demo