Vue Line Break
.jpg)
In this tutorial, we will learn how to create line breaks in Vue. We use \n
to indicate the end of a line in a string or to insert a line break. Then, we add CSS white-space: pre-wrap
to the <div>
or <paragraph>
where we want to break the line.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
How to Add New line in string in Vue Js?
To return a string with a line break in Vue.js, use the CSS style white-space: pre-wrap;
on a string containing \n
. By applying this style, the paragraph or div will automatically adjust to break lines.
Vue Line Break in String
Copied to Clipboard
23
<body>
<div id="app">
<p class="newlineStringStyle">{{result}}</p>
</div>
<script type="module">
import {
createApp
} from "vue";
createApp({
data() {
return {
result: "Hello World! \n Welcome to fontawesomeicons.com!",
};
},
}).mount("#app");
</script>
<style>
.newlineStringStyle {
white-space: pre-line;
/* or pre-wrap */
}
</style>
</body>
Output of Vue Display Text With line Breaks
Ad