Блог

Я создаю таблицу с данными, которые потенциально могут быть очень длинными, поэтому я решил обрезать текст, если он слишком длинный, и добавить всплывающие подсказки Material Design Lite, чтобы показать остальные данные, когда пользователь наведет на них курсор.

Однако, когда отображается всплывающая подсказка, хотя она показывает все данные, перенос слов не работает, поэтому длинные строки отсекаются. Это происходит только тогда, когда я заполняю текст во всплывающих подсказках с помощью KnockoutJS. Обратите внимание на скриншоте, что в правой части всплывающей подсказки, кажется, меньше отступов; это из-за проблемы, с которой я столкнулся. Этот текст должен быть намного длиннее и состоять из нескольких слов.

скриншот

 <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; }
 

Быстрым решением было бы добавить ручные разрывы строк <br/>в вашу строку ServiceTag … не оптимально, но для меня это сработало.

Вы также можете попробовать добавить атрибут пробела в класс mdl-tooltip (пробел: обычный).