如何将innerHtml放入p标签

Question

问题是我的innerHtml标签包含多个HTML标签，包括img标签。现在我的代码是

<div class="container-fluid">
    <div class="row pt-5">
        <div class="col-md-6 bg-light" style="max-height: 600px;">
            <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label for="editor">
                        <h3 class="fancyFont">Editor</h3>
                    </label>
                    <quill-editor [styles]="{height: '250px'}" formControlName="editor"></quill-editor>
                </div>
                <br>
                <button mat-raised-button color="primary">Preview</button>
            </form>
        </div>
        <div class="col-md-6 bg-light p-4" style="background:lightgray;">
            <h3 class="fancyFont">Preview</h3>
            <p [innerHTML]="editorContent"></p>
            <button mat-raised-button color="primary">Save</button>
        </div>
    </div>
</div>

我想将所有innerHtml放入该p标签中。即使p标签的样式未应用在innerHtml上。并且它溢出了p标签。我想解决这个问题。附上图片以供参考。

Answer 1

您应该在CSS中查询该容器下的img标签，并将宽度设置为100％

p img
{
  max-width:100%;
}

并确保p标签或父容器具有定义的宽度