如何使用换行符显示文本

Omk*_*xit 7 html angularjs

在此输入图像描述

我需要用换行符显示文本,这是脚本

<script>
    var app = angular.module('MyApp', []);
    app.controller('Ctrl', function ($scope) {
        console.log('Controller is executed');
        $scope.btnClick = function () {
            console.log($scope.desc);
        }
        $scope.ShowData = function () {
            $scope.text = $scope.desc;
        }
    });
</script>
Run Code Online (Sandbox Code Playgroud)

这是HTML代码

<body ng-controller="Ctrl">
<form>
    <textarea ng-model="desc" cols="105" rows="15"></textarea>
    <button ng-click="btnClick()">Submit</button>
    <button ng-click="ShowData()">Show</button>
</form>
<div ng-bind="text"></div>
Run Code Online (Sandbox Code Playgroud)

Ale*_*lov 13

尝试在<pre></pre>标记内部渲染文本而不是<div>.或者style="white-space:pre-wrap;"在你的div上使用.


mez*_*tou 6

使用正确的CSS.pre标记的默认样式保留换行符:

<pre>{{text}}</pre>
Run Code Online (Sandbox Code Playgroud)

或者你可以使用CSS(白色空间):

div {
    white-space: pre; /* or pre-wrap or pre-line */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
}
Run Code Online (Sandbox Code Playgroud)


Aki*_*_MJ 5

只需将其添加到您的样式中即可,这对我有用

white-space: pre-wrap
Run Code Online (Sandbox Code Playgroud)

超文本标记语言

<p class="text-style">{{product?.description}}</p>
Run Code Online (Sandbox Code Playgroud)

CSS

.text-style {
    white-space: pre-wrap;
}
Run Code Online (Sandbox Code Playgroud)

通过此文本<textarea>可以显示,因为它在其中带有空格和换行符