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

【问题标题】：CSS3: Tooltip Max Width with Word WrapCSS3：带有自动换行的工具提示最大宽度
【发布时间】：2014-01-22 07:33:18
【问题描述】：

尝试在此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

【问题讨论】：

你没看过小提琴吗？ jsfiddle.net/Seenu/yjYW4 当工具提示中的文本被自动换行时，宽度应该增加到某个最大宽度而不是默认宽度，以便于阅读。

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

偶然发现了同样的问题，经过一番摆弄后，我发现了以下解决方法：您必须将工具提示内容包装在另一个元素中，该元素的宽度将具有您预期的工具提示最大宽度，并定位为绝对值。然后包装的内容将在包装文本时将其用作基线最大宽度。

在撰写本文时已验证它可以在最新的公共 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;
}

【讨论】：

是的，这可行，但它与伪元素无关。

【解决方案3】：

请更改您的 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;
}

【讨论】：

【解决方案4】：

我遇到了这个老问题，因为我也想看看是否有可能让 min-width 和 max-width 在不添加 JavaScript 或额外元素的情况下工作（因为我从属性中获取工具提示文本)。事实证明，将 jsfiddle 中的 width: auto; 更改为 width: max-content; 可以解决问题（如建议：https://stackoverflow.com/a/62853552）。截图：

【讨论】：