Question

尝试在jsfiddle中使用工具提示的文本换行时应用最大宽度，但它应用默认宽度。

HTML：

<div id="container" style="margin: 167px 135px 0px 0px; height: 400px">
<a class="tooltip" tip="television">content1</a>
<a class="tooltip" tip="By noon yesterday, news television screens were filled with visuals of a Delhi we have been familiarized with over the past year.">content2</a>
</div>

CSS：

.tooltip{
display: inline;
position: relative;
white-space: pre-wrap;       /* css-3 */
margin: 20px 20px 20px 20px; 
height: 30px;  
width: 50px
 }

.tooltip:hover:after{
background: #8FBC8F;
border-radius: 5px;
bottom: 26px;
color: #000;
content: attr(tip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width:auto;
min-width:50px;
max-width:500px;
}

.tooltip:hover:before{
border: solid;
border-color: #8FBC8F transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

当工具提示中的文字被换行时，宽度应该达到某个最大宽度而不是默认宽度，以便于阅读。

这个jsfiddle在我把display：inline-table;如下所示

.tooltip:hover:after{
 :
 :
display: inline-table;
}

但它仅适用于Chrome，而不适用于IE

Answer 1

您必须使用display:inline和max-width，并且对于某些浏览器使用自动换行。有一个很好的教程可以创建css3工具提示create css3 tooltip。

以下是该教程的一些代码：

.tooltip
{
 display: inline;
 position: relative;
}
.tooltip:hover:after
{
 background: #333;
 background: rgba(0,0,0,.8);
 border-radius: 5px;
 bottom: 26px;
 color: #fff;
 content: attr(title);
 left: 20%;
 padding: 5px 15px;
 position: absolute;
 z-index: 98;
 width: 220px;
 max-width: 220px;
}

Answer 2

请更改您的CSS最小宽度和最大宽度，如下所示：

.tooltip:hover:after{
    background: #8FBC8F;
    border-radius: 5px;
    bottom: 26px;
    color: #000;
    content: attr(tip);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width:auto;
    min-width:500px; /* I have changed here */
    max-width:500px;
}

Answer 3

偶然发现了同样的问题，并且在我的案例中找到了一些解决方法之后：你必须将工具提示内容包装在另一个元素中，这将使工具提示的预期最大宽度为宽度，并且位于绝对位置。然后，包装内容将在包装文本时将其用作基线最大宽度。

在撰写本文时，已验证它适用于最新的公共IE / Edge / Chrome / FF

Codepen：https://codepen.io/jfhs/pen/LzbwgJ

在代码中：

<div class="tooltip">
 <div class="tooltip-content-wrapper">
  <div class="tooltip-content">Long long text</div>
 </div>
</div>

CSS：

.tooltip {
  position: relative;
}

.tooltip-content-wrapper {
  position: absolute;
  width: 100px; /* THIS is your max-width for tooltip */
  visibility: hidden;
}

.tooltip:hover .tooltip-content-wrapper {
  visibility: visible;
}

.tooltip-content {
  display: inline-block;
}

CSS3：带有自动换行的工具提示最大宽度

3 个答案: