Question

我正在构建一个包含可能很长的数据的表格，因此如果文本太长，我会选择截断文本，并添加Material Design Lite工具提示以显示剩下的用户将鼠标悬停在其上的数据。

但是，当显示工具提示时，虽然它确实显示了所有数据，但自动换行不起作用，因此它会切断长字符串。只有当我使用KnockoutJS在工具提示中填充文本时才会发生这种情况。请注意屏幕截图中工具提示的右侧如何填充较少;这是因为我遇到的问题。该文本应该更长，并且包装文字。

screenshot

<td class="mdl-data-table__cell--non-numeric">
    <div data-bind="text: ServiceTag, attr: { id: 'ServiceTag' + $index() }"></div>
    <div class="mdl-tooltip" data-bind="text: ServiceTag, attr: { for: 'ServiceTag' + $index() }"></div>
</td>

.mdl-tooltip {
-webkit-transform: scale(0);
      transform: scale(0);
-webkit-transform-origin: top center;
      transform-origin: top center;
will-change: transform;
z-index: 999;
background: rgba(97,97,97, 0.9);
border-radius: 2px;
color: rgb(255,255,255);
display: inline-block;
font-size: 10px;
font-weight: 500;
line-height: 14px;
max-width: 170px;
position: fixed;
top: -500px;
left: -500px;
padding: 8px;
text-align: center; }

Answer 1

快速解决方法是在您的ServiceTag字符串中添加手动换行符＆lt; br /＆gt; ...不是最佳的，但它对我有用。

您还可以尝试在 mdl-tooltip 类中添加white-space属性（white-space：normal）。

MDL工具提示不使用Knockout进行自动换行

1 个答案: