如果文本较短，则保持行为空，如果填充该行则更长

Question

我有以下HTML和JSON设置：

html的

<span class="pop-product-name">{{name}}</span>

上传.json

"name" : "Enditatem Product Name Optional Line Two",

我的问题是，我怎样才能将第一行限制为Enditatem Product Name，同时保持第二行为空（非破坏空格样式），但如果name更长，则Optional Line Two将进入第二行。甚至<span>元素是否适合使用？

修改

该项目是一个网上商店模板：

第一行只需Enditatem Product Name。如果没有其他文本，则第二行必须是空白的非中断空格。但是，IF有一个Optional Line Two，它应该出现在第二行。

Answer 1

尝试将宽度设为<span>，例如，<span> width:100px;尝试width:50px;使其尽可能（Enditatem产品名称） width，（可选第二行）一旦您执行此操作，它将自动进入第二行，如果它没有第二行，则第二行将为空，您可能会将height提供给<span>以防万一，如果第二行为空，顺便更改width您必须提供的<span>（position: absolute; ）它可能会改变您<span>可能需要margine的位置。试试这段代码：

＆＃13;

＆＃13;

.pop-product-name {
  width: 170px;
  text-align: center;
  position: absolute;
  border: 1px solid;
}

＆＃13;

<span class="pop-product-name">Enditatem Product Name Optional Line Two</span>

＆＃13;

＆＃13;

＆＃13; 因为我不能像json调用和角度这样做，所以我做了基本的跨度，应该对你有用，如果你有任何疑问，请告诉我