Ionic 2 - 文本溢出

Question

我正在向页面动态添加文本

Html

<ion-item no-lines>
  <div [innerHTML] = "response"></div>
</ion-item>

TS

this.response = "<h3 style=\"border-bottom: 1px solid #dedede;\">" + result.Response + "</h3>" + this.response; // Adding the response in new line

结果

问题

1) 文本不会（自动）换行到下一行。（看黄线，文字被隐藏）

2) 我在innerHtml中添加的任何样式，显示时都没有添加到页面中。

如何设置text-overflow/word-wrap属性解决问题？

P.S。我正在使用 ionic 2，目前正在 Chrome.

上进行测试

Answer 1

只需将 item-text-wrap class 添加到 item.

<ion-item class="item-text-wrap">
    <div [innerHTML] = "response"></div>
</ion-item>

或
在这种情况下，尝试将 "white-space: normal;" 属性添加到 ion-item。默认情况下，white-space 是 nowrap，这就是为什么您在省略号 ("...")

中看到文本的原因

Answer 2

将text-wrap添加到离子项目

<ion-item text-wrap no-lines>
  <div [innerHTML] = "response"></div>
</ion-item>

Ionic 2 - Text overflow