将文本溢出：省略号文本转换为全文的“浮动”视图

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>

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

保持对整个字符串的访问是我的问题。我想“工具提示”标签文本，在没有重新布局的情况下将其悬浮在邻居控件上方，显示整个字符串。当然，我可以更改文本溢出设置，并且通常将标签拉伸以适应，但这会导致控件重新布局，我不喜欢。由于我有数百个这样的标签，我不想要带有工具提示或类似的HTML或JavaScript解决方案。

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

Answer 1

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

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

示例：https://stackblitz.com/edit/ellipsis-but-shown-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;
}

你可能能够找到一个更优雅的替代活动状态的margin-right和z-index值，我不知道。 :)