Vue Prism Component: Text or Code from Database Not Wrapping, How to Enable Word Wrap or Adjust Width/Height Dynamically?

Question

I want to make a code highlighting component using prism:

<template>
  <!-- <prism language="javascript"> {{ code }}</prism> -->
  <prism language="javascript" v-html="code"> </prism>
</template>

<script setup>
import { ref } from 'vue'
import 'prismjs'
import 'prismjs/themes/prism.css'
import Prism from 'vue-prism-component'
const props = defineProps(['code'])
// const code = ref('const a = b')
</script>

<style lang="scss" scoped></style>

to this component sometimes is delivered a code and sometimes a text from database. For example text like this:

<p>A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.</p>

since it has no \n it is very wide and the text doesnt wrap. It works like here, it gets scroll instead of wrapping down and increasing the height. Normal wrapping behavior, or changng the width or height is impossible. How to make a text or code behave like a text if it comes from db without whitespaces, so they wrap and increase height, instead of getting a scroll?

Scroll behavior, like here on StackOverflow is bad. I want it to wrap.