CODEWITHSUNDEEP
javascripthtmlcssangular-material
bawse
bawse

Reputation: 201

innerHTML overflowing parent

I'm using the Material Design components in my Angular 4 app, the MdCard in particular. I am dynamically creating cards based on results I retrieve from an http request response. The responses are strings, but could have HTML tags such as <b></b> in them, hence I'm using [innerHTML] to do this as follows:

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

However, I'm finding that with longer strings (in mobile view), the title and subtitle overflows the md-card border. I have tried using the overflow css property, but this doesn't seem to work.

Any help is great.

Upvotes: 0

Views: 1396

Answers (2)

bawse
bawse

Reputation: 201

As per my comment on @Glauber Ramos answer, I managed to fix the issue using non-standard webkit css.

word-break: break-word;

Upvotes: 0

Glauber
Glauber

Reputation: 602

Can you show a live example of it? It is hard to know what is happening without looking at an example.

There is some ways of dealing with text-overflow is CSS. You can try:

word-wrap: break-word;

or cut the text with

text-overflow: ellipsis;

Upvotes: 2

Related Questions