如何用换行符显示文本答案

【问题标题】：How to show the text with Line Breaks如何用换行符显示文本
【发布时间】：2020-02-26 18:18:54
【问题描述】：

我需要显示带有换行符的文本，这是脚本

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

这是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>

【问题讨论】：

标签： html angularjs

【解决方案1】：

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

【讨论】：

The Preformatted Text element，或者只是 <pre> 给朋友，文档。
我正在使用style="white-space:pre-wrap;"。

【解决方案2】：

使用正确的 CSS。 pre 标签的默认样式保留换行符：

<pre>{{text}}</pre>

或者您可以使用 CSS (white-space)：

div {
    white-space: pre; /* or pre-wrap or pre-line */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
}

【讨论】：

【解决方案3】：

添加一个pre 标记<pre></pre>，用于显示文本。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body ng-app="">

<p>Write something with breaks and check:</p>

<textarea ng-model="myTextarea"></textarea>

<p>The content of the textarea is;</p>
<pre><span>{{myTextarea}}</span></pre>

</body>
</html>

请运行以上代码

Here is a working DEMO

【讨论】：

h1 自动将文本放在下一行，除非我们通过 css 代码更改了它的行为。我认为您应该在示例中使用标记而不是
我不认为h1 会自动添加新行，您可以通过删除pre 标签来查看我的示例链接。
h1 会自动添加新行。例如。 jsfiddle.net/mkau1uaL 。实际上我要说的是，您应该在示例中使用标记而不是 h1。否则 OP 可能会认为 h1 将文本放在同一行。
@GiulioBambini，你误解了这个问题，他说的不是h1 或span。他正在谈论文本区域内的文本，无论如何我将h1更改为span以避免这种混淆。 :)
我并不是说你的答案是对还是错。刚刚指出了您的答案的改进空间。干杯:)

【解决方案4】：

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

white-space: pre-wrap

HTML

<p class="text-style">{{product?.description}}</p>

CSS

.text-style {
    white-space: pre-wrap;
}

通过<textarea>中的这个文本可以显示，因为它在那里带有空格和线刹车

【讨论】：

但是“pre”有个问题就是开头加了很多空格

【解决方案5】：

使用：

<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.replace(/\r?\n/g, '<br />');
        }
    });
</script>

换行符 (\n\r?) 与 HTML 标签不同

【讨论】：

【解决方案6】：

在你的 CSS 上添加样式

  <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" class="line-break"></div>

<style>
    .line-break {
    width: 90px; //Give some width accoring you
    overflow-wrap: break-word;
    }
 </style>

【讨论】：