innerHTML переполнение родителя

Question

Я использую компоненты Material Design в своем приложении Angular 4, в частности, MdCard. Я динамически создаю карточки на основе результатов, полученных из ответа HTTP-запроса. Ответы являются строками, но могут содержать теги HTML, такие как <b></b> в них, следовательно, я использую [innerHTML], чтобы сделать это следующим образом:

        <md-card-title-group>
          <md-card-title [innerHTML]="result.title"></md-card-title>
          <md-card-subtitle [innerHTML]="result.link"></md-card-subtitle>
        </md-card-title-group>

Тем не менее, я обнаружил, что с более длинными строками (в мобильном представлении) заголовок и субтитры выходят за границы md-карты. Я пытался использовать overflow Свойство CSS, но это не похоже на работу.

Любая помощь велика.

Answer 1

Можете ли вы показать живой пример этого? Трудно понять, что происходит, не глядя на пример.

Существует несколько способов борьбы с переполнением текста в CSS. Ты можешь попробовать:

word-wrap: break-word;

или вырезать текст

text-overflow: ellipsis;

Answer 2

Что касается моего комментария к ответу @Glauber Ramos, мне удалось решить проблему с помощью нестандартного webkit css.

word-break: break-word;