Html 如何显示带换行符的文本_Html_Angularjs

Html 如何显示带换行符的文本

html angularjs

Html 如何显示带换行符的文本,html,angularjs,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);

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

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

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


var-app=angular.module（'MyApp'，[]）；
应用程序控制器（'Ctrl'，函数（$scope）{
log（“控制器已执行”）；
$scope.btnClick=函数（）{
log（$scope.desc）；
}
$scope.ShowData=函数（）{
$scope.text=$scope.desc；
}
});

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


提交
显示

在显示文本的位置添加一个

pre

标记

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


写一些有中断的内容并检查：
文本区的内容为
div {
    white-space: pre; /* or pre-wrap or pre-line */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space */
}

{{myTextarea}}

使用正确的CSS。

pre

标记的默认样式保留换行符：

尝试在

标记内呈现文本，而不是

。或者在您的div上使用

style=“空格：pre-wrap；”“

。

使用：


var-app=angular.module（'MyApp'，[]）；
应用程序控制器（'Ctrl'，函数（$scope）{
log（“控制器已执行”）；
$scope.btnClick=函数（）{
log（$scope.desc）；
}
$scope.ShowData=函数（）{
$scope.text=$scope.desc.replace（/\r？\n/g，
）；
}
});

换行符（\n\r？）与HTML标签不同

在css上添加样式


提交
显示
.换行{
宽度：90px；//给你一些宽度
溢出包装：断开单词；
}

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

空白：预换行

HTML

{{{product？.description}

CSS

。文本样式{
空白：预包装；
}

通过这种方式，

中的文本可以显示为带有空格和行制动器的文本

您必须在文本区域中找到换行符

\n

，然后添加它。检查我的更新答案1自动将文本放在下一行，除非我们通过css代码更改了它的行为。我认为您应该在示例中使用标记，而不是我认为

h1

自动添加新行，您可以通过删除

pre

标记来检查我的示例链接。h1会自动添加新行。例如实际上，我想说的是，您应该在示例中使用tag而不是h1。否则OP可能会认为h1将文本放在同一行。@GiulioBambini，你误解了这个问题，他说的不是

h1

或

span

。他正在谈论文本区域内的文本，无论如何，我将

h1

更改为

span

，以避免这种混淆我并不是说你的答案是对是错。刚才在你的回答中指出了有待改进的地方。干杯：）但是“pre”有一个问题，它在开头添加了很多空白

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