如何让div不立即换行

Question

我正在尝试制作一个工具提示，当鼠标悬停在上方时会弹出，而不是在立即能够时自动换行。工具提示功能完美运行，这个问题纯粹与文本换行和宽度等有关。目前，它会换行到它包含的最长单词的宽度，但我希望它在换行文本之前达到视口的宽度。

当前 html

<a class="tooltip">
        Hover
        <div class="tooltip tooltiptext">
                Tooltip Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
</a>

CSS

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
}

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

Answer 1

删除“位置：相对；”你会得到这个CSS：

.tooltip {
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  
}

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