How to fix problems with the output of the test on the page?

Question

css

There is a page with
Link

text output and there are problems with text wrapped in a tag:
1) I display text and if part of the text is wrapped in it,
then this text is somewhere below:


2) below I can’t understand why the ul element and its indents are so elements:

Answer 1

1) This is a bootstrap-vue application and in the reverse case I display the text (in the _.model.text variable)
in the component https://github.com/zdy1988/vue-jstree
trying to expand each cell in width so that the entire text is displayed (or part of it with scrolling)
like:

<button @click="loadAdComments()">loadAdComments</button>
        <v-jstree
                :data="adComments"
        >
            <template slot-scope="_">
                <div style="display: inherit; width: 100%; heiRRght: 500px !important; border: 2px dotted red;" @click.ctrl="customItemClickWithCtrl">
                    <i :class="_.vm.themeIconClasses" role="presentation" v-if="!_.model.loading"></i>
                    <div class="pre-formatted" v-html="_.model.text"
                             style="max-height: 200px !important; display: inline;justify-self: fleWWx-start;jusWtify-items: flex-start"></div>
                    <button style="border: 2px; background-color: transparent; cursor: pointer;" @click="customItemClick(_.vm, _.model, $event)"><i
                            class="fa fa-remove"></i></button>
                </div>
            </template>
        </v-jstree>

2) In the lower case, just output the memo field:

<b-col md="12 m-2">
                <b-card-body v-if="is_page_loaded">
                    <b-card-text>
                        <div class="text_wrapper" v-html="adRow.description"></div>
                    </b-card-text>
                </b-card-body>
            </b-col>

In both cases the text has blocks of text wrapped in and there are problems with them.