我需要用换行符显示文本,这是脚本
<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)
使用正确的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)
只需将其添加到您的样式中即可,这对我有用
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>
可以显示,因为它在其中带有空格和换行符