将Javascript变量显示为div中的多行答案

【问题标题】：Displaying Javascript variable into multiline in a div将Javascript变量显示为div中的多行
【发布时间】：2019-12-16 17:12:01
【问题描述】：

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

例如：

让 myVal = "我的名字 123456789 新西兰元"。

在 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;
}

【问题讨论】：

您是否尝试过像这样添加换行符：myVal.split(' ').join('<br>')？
@Romen - 如果myVal 包含< 或&，则会失败。
也许这个答案会有所帮助stackoverflow.com/questions/33300106/…
不。我会检查并告诉你。谢谢
@T.J.Crowder，如果“失败”是指由于 HTML 格式错误而无法正常显示，那么这将在调用 split 和 join 之前发生，如果 myVal 在第一名。

标签： javascript html css ember.js

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

当您使用 ember 时，我可以将计算属性与产生 <br> 标签的 {{#each}} 循环结合使用：

所以你的组件或控制器中的计算属性是这样的：

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

然后在模板中：

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

【讨论】：

【解决方案3】：

看看这个。动态且可重用。

 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>

【讨论】：