Question

我有元素的表和行，我需要在悬停时显示工具提示。单元元素的大小是固定的，但是悬停元素更宽并且具有多行。问题是使用“ white-space：pre”会使它在有空间的情况下按预期方式工作，但在靠近容器右侧发生悬停并导致水平滚动的情况下却无法正常工作，同时设置“ white-space” ：“自动换行”会导致文本在有空格且应该更宽时缩小，但在没有空格时会按预期方式起作用。

如何在有可用空间的情况下使悬停的文本完全展开，而在没有可用空间的情况下如何使悬停的文本缩小，例如紧靠容器的右侧？

.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>

空格：pre引起水平滚动，空格：pre-wrap引起收缩。如何结合使用两者？

0 个答案: