html - White-space: pre 导致水平滚动， white-space: pre-wrap 导致收缩。如何结合使用两者？

Question

我有表格和元素行，我需要在悬停时显示工具提示。单元格元素的大小是固定的，但悬停元素更宽且有多行。问题是使用“空白：pre”，当有空间时，它会按预期工作，但当悬停发生在靠近容器右侧时，会导致水平滚动，同时设置“空白: pre-wrap" 导致文本在有空间时缩小，应该更宽，但在没有空间时按预期操作。

如何使悬停的文本在有可用空间时完全展开，但在没有可用空间时缩小，例如靠近容器的右侧？

.container {
/* only to limit redundant code and simulate approaching to right edge of screen*/
    width: 400px;
    height: 120px;
    overflow: hidden; 
    border: 1px solid black;
}

.tooltip {
    position: relative;
    width: 40px;
    text-align: center;
}

.tooltip::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
    background: blue;
    display: none;
    white-space: pre;
    border: 1px solid black;
}

.tooltip:hover::after {
    display: block;
}

<div class="container">
    <table class="tab">
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
        <td class=" tooltip" data-title="Lorem Ipsum
      Lorem Ipsum Lorem Ipsum aaa
      Lorem Ipsum"><button>btn</button></td>
    </table>
</div>

标签： htmlcss