css - 转换文本溢出 : ellipsis text to "floating" view of full text

Question

我有一个包含标签/输入控件对的 Angular/Material 侧面板。下面是将标签与 mat-slide-toggle 配对的示例:

<div class="flex justify-between items-center">
  <span class="mat-slide-toggle-content">
	{{ 'StringReference' | translate }}
  </span>
  <mat-slide-toggle [ngModel]="booleanValue" (ngModelChange)="handleModelChange($event)" name="aToggle" color="primary">
  </mat-slide-toggle>
</div>

由于一些标签文本可能很长，特别是在翻译版本中，我希望有一个“备份计划”来保持布局但仍然使标签文本易于访问。当标签太宽且文本溢出时，省略号工作正常:设置了省略号。

保持对整个 字符串的访问是我的问题。我想“工具提示化”标签文本，在悬停时将其 float 在相邻控件上方无需重新布局，显示整个字符串。当然，我可以更改文本溢出设置，并且通常会拉伸(stretch)标签以适合，但这会导致控件重新布局，这是我不喜欢的。因为我有数百个这样的标签，所以我不想要带有工具提示或类似内容的 HTML 或 JavaScript 解决方案。

任何可能有效的纯 CSS 想法？

Answer 1

这可能不是完美的答案，因为您的代码片段不会在此处呈现，但我想这只是一种侧面拉出的东西。这是您可以使用的潜在的纯 CSS 解决方案；我只是使用 bootstrap 列来显示截断和扩展:

概念:在事件状态下切换样式。

示例:https://stackblitz.com/edit/ellipsis-but-shown-on-active

繁琐的工作将在我为特定宽度的 col-4 建模的两个自定义类中进行:

.col-4-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.col-4-overflow:active {
    overflow: visible;
    text-overflow: inherit;
    background: cornsilk;
    position: relative;
    min-width: 66.66666666666666%;
    margin-right: -180px;
    z-index: 1;
}

我不知道，您也许能够找到一个更优雅的方法来替代事件状态的 margin-right 和 z-index 值。 :)