2017-06-19 6 views
0

Ich hatte einige Schwierigkeiten, diesen Titel zu formulieren, aber mein Problem ist, dass die \ n Zeichen in Strings in meinem JSON-Wörterbuch ungültig werden, wenn ich zu HTML analysieren.Newline-Zeichen funktioniert nicht beim Analysieren als JSON-String-Objekt

var exp = { 
 
"globalRunInfo" : { 
 
\t \t "file" : "file/path/goes/here", 
 
    "info" : "random junk here", 
 
    "copyright" : "this is where I am getting my problem \n the newline doesn't work \n so all this gets formatted as one line" 
 
\t } 
 
} 
 

 
ko.applyBindings(exp);
<!DOCTYPE html> 
 
<html> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<div data-bind="with: globalRunInfo"> 
 
    <p data-bind="text: file"></p> 
 
    <p>SOMETHING</p> 
 
    <p data-bind="text: info"></p> 
 
    <span data-bind="text: copyright"></span> 
 
</div> 
 

 
</html>

Wer weiß, wie dieses Problem beheben? Ich versuche zu vermeiden, eine Funktion zu schreiben, die nach Newline-Zeichen sucht und sie durch Pausen oder etwas ersetzt. Es ist eine Menge Arbeit für etwas, das ich einmal benutzen werde.

Antwort

1

Versuchen Sie, die CSS-Eigenschaft white-space: pre-wrap auf das Element span zu setzen. Dies führt zum Abbremsen des neuen Liniencharakters.

<span style="white-space: pre-wrap" data-bind="text: copyright"></span> 
1

Sie können eine Klasse in den Bereich zuweisen und verwenden white-space: pre-wrap

vom white-space documentation Genommen:

pre-wrap 
Sequences of whitespace are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes. 

Darüber hinaus können Sie auch den zusätzlichen Platz entfernen, nachdem \n so nicht wahr Holen Sie sich den Platz an der Vorderseite der neuen Zeile.

var exp = { 
 
"globalRunInfo" : { 
 
\t \t "file" : "file/path/goes/here", 
 
    "info" : "random junk here", 
 
    "copyright" : "this is where I am getting my problem \nthe newline doesn't work \nso all this gets formatted as one line" 
 
\t } 
 
} 
 

 
ko.applyBindings(exp);
.example{ 
 
    white-space: pre-wrap; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<div data-bind="with: globalRunInfo"> 
 
    <p data-bind="text: file"></p> 
 
    <p>SOMETHING</p> 
 
    <p data-bind="text: info"></p> 
 
    <span class="example" data-bind="text: copyright"></span> 
 
</div> 
 

 
</html>

Verwandte Themen