Weebly站点hover触发时完整显示段落的实现问题求助

你的问题出在固定了tooltip文本框的宽度，同时没有给长内容足够的换行和空间适配。以下是具体修改方案：

关键调整点 #

• 移除.tooltiptext中固定的width: 120px，改用max-width: 300px（可根据需求自定义数值），让盒子根据内容自动适配宽度，同时避免过宽
• 将padding: 5px 0改为padding: 8px 12px，给左右内容留足呼吸空间，避免文字贴边
• 保留overflow-wrap: break-word确保长单词自动换行，新增white-space: pre-wrap让段落换行正常显示
• 用transform: translateX(-50%)替代margin-left: -60px，适配宽度变化后的居中定位，避免偏移出可视区域

修改后的完整代码 #

CSS #

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

.tooltip .tooltiptext {
  visibility: hidden;
  max-width: 300px;
  background-color: black;
  color: #fff;
  text-align: left; /* 长段落左对齐更易读 */
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  bottom: 120%; /* 与触发元素拉开一点距离 */
  left: 50%;
  transform: translateX(-50%);
}

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

HTML #

<center>
  <br><br>
  <div class="tooltip">Word
    <span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus, leo sit amet maximus finibus, quam justo interdum dolor, ac auctor mi elit eu nisi. Praesent vel facilisis mi. Nulla non ligula eget nunc euismod consectetur porta a elit. Pellentesque sodales ipsum nibh, at pretium mi vehicula luctus. Morbi dapibus felis vitae dolor ultrices dapibus. Sed vestibulum a augue id ultricies. Etiam mi diam, hendrerit a quam id, convallis molestie urna. Nullam facilisis elit sit amet lobortis malesuada. Donec lacinia ante turpis, id laoreet risus egestas scelerisque. Aliquam at iaculis nisl. Donec nec venenatis neque. In mollis mauris laoreet pellentesque efficitur. Proin feugiat elit sit amet lacus commodo luctus. Donec rhoncus ipsum vel nibh feugiat, eget feugiat justo volutpat. Aenean et nunc nunc.</span>
  </div>
</center>

额外提示 #

如果Weebly自带样式有冲突，可给.tooltiptext的属性加上!important（比如max-width: 300px !important）强制覆盖，但优先建议通过调整选择器优先级解决冲突。

内容的提问来源于stack exchange，提问作者maximumoverdriverload