Displaying Javascript variable into multiline in a div

Question

I am getting dynamic variable from webservice. I want to add the empty space or breaktag tag in the javascript variable.

For eg:

let myVal = "myname 123456789 NZD".

when displaying in the UI I want to display the names like below in a single div

myname 
123456789
NZD

The variable name all are dynamic. I am using word-wrap: break-word.

But few text cut of eg:

firstname last
name 123456789.

How to achieve like below :

myname 
123456789 
NZD

I am using below css:

div{
    position: relative;
    top: 5px;
    left: 10px;
    width: 46%;
    min-height: 22px;
    height: auto;
    font-family: "Montserrat-SemiBold";
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #000000;
    padding-bottom: 11px;
    word-wrap: break-word;
}

Have you tried adding line breaks like this: `myVal.split(' ').join('
')`? — Romen, Dec 16 '19 at 17:14
maybe this answer will be helpful https://stackoverflow.com/questions/33300106/break-line-on-white-space-between-words — Mat.C, Dec 16 '19 at 17:14
@T.J.Crowder, If by "fail" you mean not display properly due to malformed HTML, well that's going to happen before calling the `split` and `join` if `myVal` has it in the first place. — Romen, Dec 16 '19 at 17:17
it actually wont work but will not fail with a `<` if hes actually using ember, because ember does the escaping so that every string will be displayed as text node, not HTML. You could explicit opt out with safe string tho. — Lux, Dec 17 '19 at 05:09

score 0 · Answer 1 · answered Dec 16 '19 at 18:06

Try this

<div class="one-word-each-line" style="
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
">myname 123456789 NZD</div>

score 0 · Answer 2 · answered Dec 17 '19 at 05:07

When you're using ember I could use a computed property in combination with a {{#each}} loop producing <br> tags:

so a computed property in your component or controller like this:

splittedValue: computed('myVal', function() {
  return this.myVal.split(' ');
}),

and then this in the template:

<div>
  {{#each this.splittedValue as |line|}}
    {{line}}<br>
  {{/each}}
</div>

PatMan10 · Answer 3 · 2019-12-16T18:50:42.647

Check this out. Dynamic and reusable.

 function createWrapper(value) {
  const wrapper = document.createElement("div");
  wrapper.classList.add("wrapper");
  value.split(" ")
       .forEach(v => {
        const span = document.createElement("span");
        span.innerText = v;
        wrapper.appendChild(span);
        });
  document.getElementById("container").appendChild(wrapper);
 }
 createWrapper("Alex 575 ASD");
 createWrapper("Siya 666 ABC");
 createWrapper("Jack 090 XYZ");

.wrapper {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
 }

 <div id="container">
 </div>

Displaying Javascript variable into multiline in a div

3 Answers3