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

如何让工具提示包含文本，比如300px？（使用max-width）然后换行并保持垂直包含它。

感谢。

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

Answer 2

只需添加此CSS。

.tooltip span {
    position: absolute;
    width: 120px;
    color: #FFFFFF;
    background: #327FBA;
    min-height: 32px;
    line-height: 16px; /* change the line-height */
    text-align: center;
    visibility: hidden;
    border-radius: 5px;
    font-size: 12px;
    word-break: break-word;
    display: table;
}

在此之后，您可以相应地更改行高。

工具提示最小高度但不是最小宽度

2 个答案: