我在此页面上有一个工具提示:

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 DID替换min-height会使工具提示背景垂直包含文本。

如何使工具提示最多包含300px的文本? (使用最大宽度),然后换行并保持其垂直。

谢谢。

http://jsfiddle.net/hrfz442d/

最佳答案

只需添加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

10-05 20:58
查看更多