html - 如果文本较短，则保留一行为空，如果较长，则填充该行

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 .如果没有附加文本，第二行需要是一个空白的不间断空格。但是，如果有 Optional Line Two , 它应该出现在第二行。

Answer 1

尝试给<span>赋予宽度，例如 <span> width:100px;尝试 width:50px;让它尽可能多(Enditatem Product Name) width , (Optional Line Two) 一旦你这样做，它会自动出现在第二行，如果没有第二行，第二行将为空，你可能会给出 height给你的<span>以防万一第二行是空的，顺便说一下，为了改变width对于 <span>你必须给 ( position: absolute; ) 它可能会改变你的 <span> 的位置你可能需要 margine它。试试这段代码:

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

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

因为我也无法将它作为 json 调用和 Angular 来完成，所以我做了基本跨度并且应该适合你，如果你有任何问题请告诉我