javascript - innerHTML 溢出父级

Question

我在我的 Angular 4 应用程序中使用 Material Design 组件，尤其是 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>

但是，我发现如果字符串较长(在移动设备 View 中)，标题和副标题会溢出 md-card 边框。我试过使用 overflow css 属性，但这似乎不起作用。

任何帮助都很棒。

Answer 1

你能展示一个活生生的例子吗？如果不看示例，很难知道发生了什么。

有一些处理文本溢出的方法是 CSS。你可以试试:

word-wrap: break-word;

或剪切文本

text-overflow: ellipsis;