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的潜在解决方案；我只是使用了引导程序列来显示截止和扩展：

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

示例：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值，我不知道。：）

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

1 个答案: