Как вписать innerHtml в тег ap

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 или родительский контейнер имеют определенную ширину