将文本溢出：省略号文本转换为全文"floating"视图

Question

i具有一个包含标签/输入控制对的角/材料侧面面板。一个示例是在下面将标签与垫子式的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>

由于某些标签文本可能很长，尤其是在翻译版本中，因此我想拥有一个"备份计划"来维护布局，但仍可以使标签文本可访问。当标签太宽并且文字跨流时，省略号正常工作：设置了省略号。

保持对全部字符串的访问是我的问题。我想" tooltip-ize"标签文本，将其浮动在悬停上的邻居控件上方，而无需中继，显示了整个字符串。当然，我可以更改文本跨流设置，并且通常将标签伸展到适合的标签，但这会导致控件的相对，我不喜欢。由于我有数百个这样的标签，因此我不希望使用工具提示或类似的HTML或JavaScript解决方案。

任何可能起作用的只有CSS的想法？

Answer 1

这可能不是完美的答案，因为您的代码代码片段不会在这里呈现，但我想这只是一种侧面拉动。这是您可以使用的潜力，仅使用CSS的解决方案；我只是使用bootstrap列显示截止和扩展：

概念：在活动状态上切换样式。

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

Gruntwork将在我为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;
}

您也许可以找出一个更优雅的替代品，以实现主动状态的边缘权利和z索引值，我不知道。：）