0

I want to show all the bindings at the bottom of my page of the AngularJS application. So at the end of the page (inside the body) i've put a {{vm}} which shows very correctly all the strings.

EG. {"section":"b","b1anow":"","b1bnow":"","b1cnow":"","b1dnow":"","b1nowpoints":100,"b1ashould":"","b1bshould":"","b1cshou" }

But when the string becomes very big the lines do not break and it continues to 1 very very big line, going out of bounds (goes out of the HTML element keeping 1 row instead of wraping inside the parent element).

I've tried <pre>{{vm}}</pre> but it still have same output. I believe it does that because there is no space character, but i'm not sure.

How can i put {{vm}} so it breaks to multiple lines and wraps in the parent html element ?

I'm not looking for a pretify javascript or whatever. This is not what I ask. ALso word-wrap:break-word; does not work, i added but nothing happened.

I've tried <div style="word-break: break-all;"> {{vm}} </div>

but doesnt work, still 1 line.

Simos Fasouliotis
  • 1,383
  • 2
  • 16
  • 35
  • @Santi Possible duplicates is not a solution. Firstly i dont want a prettify script, just a wrap. Secondly using word-wrap:break-word; does not work in my situation. – Simos Fasouliotis Jun 14 '17 at 17:20
  • Possible duplicates mean that your question has already been asked and answered. If you're outputting your JSON string as text on an HTML page, then I'm not sure how `word-wrap: break-word` doesn't work in your situation. It [seems to work fine](https://jsfiddle.net/hqL09f8j/1/). – Tyler Roper Jun 14 '17 at 17:27

1 Answers1

2
vm.replace(/([{},:])/g, ' $1 ')

For example:

'{"k1":"v1","k2":"v2"}'.replace(/([{},:])/g, ' $1 ')

would return 

 { "k1" : "v1" , "k2" : "v2" }

and with those extra-spaces your JSON can wrap without problems.

LICD
  • 66
  • 4