css max-width 不工作，最大宽度后 br答案

【问题标题】：css max-width not working, br after max widthcss max-width 不工作，最大宽度后 br
【发布时间】：2018-05-12 15:41:57
【问题描述】：

有没有人可以帮助我了解这篇文章：首先我想知道为什么 max-width 在下面的代码中不起作用其次，我需要工具提示中的内容一直持续到最大宽度，然后进入下一行非常感谢

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    max-width:500px;
    background-color: #555;
    color: red;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

<body style="text-align:center;">

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">TooltiptextTooltiptextTooltiptextTooltiptextTooltiptext</span>
</div>

</body>

【问题讨论】：

标签： html css word-wrap word-break

【解决方案1】：

在tooltip div上添加以下2种样式

word-break: break-all;
word-wrap: break-word;

【讨论】：

你好，非常感谢，你的解决方案解决了中断问题，但我需要工具提示中的内容一直持续到最大宽度，然后转到下一行，通过你提到的代码，它会发生宽度，而不是最大宽度
您已在 tooltiptext 上应用了宽度和最大宽度（以像素为单位）。两者如何协同工作？如果你将宽度设置为 120px，那么它怎么能占用 max-width 呢？
如果你的意思是错的，请告诉我它的正确形式。因为我已经单独检查了最大宽度，但我没有得到结果。主要问题是，最大宽度在任何情况下都不起作用！