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.
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
<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
