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

【问题标题】：MDL Tooltip not word-wrapping with KnockoutMDL 工具提示不使用 Knockout 自动换行
【发布时间】：2016-10-14 18:18:20
【问题描述】：

我正在构建一个包含可能很长的数据的表格，因此我选择在文本太长时截断文本，并添加 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; }

【问题讨论】：

应用了哪些样式？

标签： knockout.js tooltip material-design-lite

【解决方案1】：

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

您也可以尝试在 mdl-tooltip 类中添加 white-space 属性（空白：正常）。

【讨论】：