在div中将Javascript变量显示为多行

我正在从webservice获取动态变量。我想在javascript变量中添加空格或breaktag标记

例如：

让myVal=“myname 123456789 NZD”

在UI中显示时，我希望在单个div中显示如下名称

myname 
123456789
NZD

变量名都是动态的。我使用的是单词换行：break-word

但很少有文本剪辑，例如：

firstname last
name 123456789.

如何实现以下目标：

myname 
123456789 
NZD

我正在使用以下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;
}

试试这个

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

myname 123456789新西兰元

看看这个。动态的和可重用的

函数createWrapper（值）{
const wrapper=document.createElement（“div”）；
wrapper.classList.add（“wrapper”）；
值。拆分（“”）
.forEach（v=>{
const span=document.createElement（“span”）；
span.innerText=v；
appendChild（span）；
});
document.getElementById（“容器”）.appendChild（包装器）；
}
createWrapper（“Alex 575 ASD”）；
createWrapper（“Siya 666 ABC”）；
createWrapper（“杰克090 XYZ”）
.wrapper{
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
}
当您使用ember时，我可以将计算属性与
{{{{each}}
循环结合使用，生成

标记：

因此，组件或控制器中的计算属性如下所示：

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

然后在模板中添加以下内容：

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


{{#每个this.splittedValue作为|行|}
{{line}}

{{/每个}}
您是否尝试过像这样添加换行符：
myVal.split（“”）.join（“
”）
？@Romen-如果
myVal
包含
，则会失败。也许这个答案会有帮助，不。我会查一查，然后告诉你。Thanks@T.J.Crowder，如果“fail”是指由于HTML格式错误而无法正确显示，那么在调用
split
和
join
If
myVal
将其放在首位之前就会发生这种情况。