在一行上显示多个带行字符串的角度

Angular displaying multiple lined strings on one line

本文关键字：字符串 显示 一行      更新时间：2023-09-26

我正试图通过Angularjs在网页上显示一个字符串，该字符串可能有多行。这是我得到的：

<textarea ng-model="StringValue"></textarea>
{{StringValue}}

当您在文本区域中键入：

"这是

字符串"

你得到：

"这是一个字符串"

你是如何得到它的，这样文本就可以像打字一样显示了？

小心ng-bind-html-非常容易获得XSS注入。

如果您只想显示换行符，而不想在页面中显示XSS
可以使用简单的css规则：white-space: pre:

<span style="white-space: pre">{{multilinetext}}</span>

当然，你可以为这个创建css类：

<style>.pre {white-space: pre}</style>
<span class="pre">{{multilinetext}}</span>

此外，此方法使所有空白都可见：前导空格、多个空格选项卡等

这是HTML的一个问题。不成角度。Angular正在写下你告诉它的内容。

在HTML中，在<pre>标记之外，无尽的空白（回车、制表符、空格等）都被视为一个空白。这就是为什么如果不使用<pre>标记块，则需要<br/>和&nbsp;之类的东西。

所以在HTML中尝试一下，这样你就可以了解正在发生的事情：

<h3>Plain DIV</h3>
<div>
Some
   text
      here
</div>
<h3>Now with non-breaking spaces and line breaks</h3>
<div>
Some<br/>
&nbsp;&nbsp;&nbsp;text<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;here<br/>
</div>
<h3>Now with a PRE tag</h3>
<pre>
Some
   text
      here
</pre>

下面是Fiddle演示上述内容。

不过，您需要使用一些自定义类来设置PRE标记的样式，使其看起来像页面上的其他文本，因为<pre>的大多数默认样式将使用单间距（固定宽度）字体，如Courier或Consolas。

要么就是这样，要么你就必须用angular编写一个过滤器，将空格、制表符和换行符处理成正确的标记。。。这将是一种难以维持的痛苦。

编辑：根据以上理解，Angular解决方案（如果您不只是使用PRE）

因此，IMO，如果你不想使用<pre>标签，最好的解决方案是创建一个过滤器，为你清除文本，并用换行符和非换行符填充文本。

类似的东西

app.filter('formatText', function (){
  return function(input) {
    if(!input) return input;
    var output = input
      //replace possible line breaks.
      .replace(/('r'n|'r|'n)/g, '<br/>')
      //replace tabs
      .replace(/'t/g, '&nbsp;&nbsp;&nbsp;')
      //replace spaces.
      .replace(/ /g, '&nbsp;');
      return output;
  };
});

然后使用它，你会做这样的事情：

<span ng-bind-html="foo | formatText"></span>

需要注意的重要事项：

  1. 您需要在脚本引用中包含angular-sanitize.js文件
  2. 您需要在模块声明中要求'ngSanitize'：
var app = angular.module('myApp', ['ngSanitize']);

这样就可以使用ng-bind-html或ng-bind-html-unsafe指令。

这里有一个演示用法的plunk。

正如其他答案所提到的，您可以使用过滤器来实现它。

让我为您实现它：

<textarea ng-model="StringValue"></textarea>
<div ng-bind-html-unsafe="StringValue | breakFilter"></div>
angular.module('myApp', []).filter('breakFilter', function () {
    return function (text) {
        if (text !== undefined) return text.replace(/'n/g, '<br />');
    };
});

您可以始终使用PRE标记：

<textarea ng-model="StringValue"></textarea>
<pre>{{StringValue}}</pre>

另一种方法：

<textarea ng-model="StringValue"></textarea>
<span ng-bind-html-unsafe="newLineToBR(StringValue)"></span>

具有控制器功能：

$scope.newLineToBR = function(text) {
    return text ? text.replace(/'n/g, '<br />') : '';
};

或者，正如@sza所展示的，一个更好的方法是将它变成一个过滤器。下面是一个工作示例。

处理您的情况的正确、最简单、语义正确的方法是使用pre标记。这些标签是专门为已经格式化的文本设计的，这就是您在这里所拥有的。pre标签中的文本可以很容易地使用CSS进行样式设置，使其看起来像普通文本。

<pre style="font: inherit">{{StringValue}}</pre>

不要问我为什么，但为了让replace工作，我必须在'n 前面多放一个'

input.replace(/''n/g, '<br />')

您可以使用筛选器将新行转换为html换行符。

｛｛StringValue|breakFilter｝｝

如果使用Angular

可以使用[innerText]或[innerHTML]就像这个

<p  [innerText]=StringValue /p>
相关文章：