I'm working with BootstrapVue
.
I have a string
like following: Hello / my name / is B0BBY / how / are you?
Now I want to show this string in a <b-modal>
and replace all /
(Slash) with a linebreak.. I've tried following:
var newString = actualString.replaceAll(" / ", "\n")
If I console.log
this newString
it shows in my console with a linebreak. But if I'm using it in my b-modal
it shows not with a linebreak, it's all in one line.
I think there is a pretty simple solution for it, but I can't figure it out. Thanks for helping me out!
There are two possibilities. If you want to use \n
in your HTML, you have to set a CSS property white-space: pre-line;
for the parent element.
Or you can simply replace \n
with <br>
. Both are possible.
var newString = actualString.replaceAll(" / ", "<br>")
actualString = "Hello / my name / is B0BBY / how / are you?"; var newString = actualString.replaceAll(" / ", "\n") console.log(newString) document.getElementById('out').innerHTML = newString;
<div id="out" style="white-space: pre-line; "></div>
Lines in HTML are supposed to be separated with block elements ( <p>
, etc) or <br>
. Changing the way multiline text is rendered (as another answer shows) is a hack that is not needed under normal circumstances when HTML layout can be directly affected.
The string can be separated and rendered as an array:
<b-modal>
<p v-for="(line, index) in lines(actualString)" :key="index">{{line}}</p>
Where lines
is a method (can be converted to a filter or a computed):
lines: actualString => actualString.replaceAll(" / ", "\n")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.