css - 如果下一个元素在不同的行上，则隐藏该元素

Question

我需要在网页上显示一个地址，需要显示如下

Street Number, PostalCode City

但是，如果地址太长，一行写不下，则需要如下显示

Street Number

PostalCode City

请注意缺少逗号。我已经想出如何打破这一点，但我被逗号困住了。有没有什么办法可以仅在 CSS 中或使用最少的 JS 来做到这一点？

这是我已经拥有的

HTML:

<div class="floatLeft">
   Street<span>&nbsp;</span>12<span>,&nbsp;</span>
</div>
<div class="floatLeft">9000<span>&nbsp;</span>Gent</div>

CSS:

.floatLeft {
   float:left;
}

还有一个可用的 JS Fiddle:https://jsfiddle.net/7w70fff1/1/

Answer 1

这样的事情怎么样。逗号是绝对定位的，因此当第二个 div 换行时，它位于容器视口(viewport)的左侧，它被隐藏了。

.container {
  overflow: hidden;
}
.container::after {
  clear: both;
}
.floatLeft {
  float: left;
  position: relative;
}
.floatLeft:first-child {
  margin-right: 1ch
}
.floatLeft:not(:first-child) span:first-child {
  display: inline-block;
  position: absolute;
  right: 100%;
  top: 0;
  content: ',\00A0';
}

<div class="container">
  <div class="floatLeft">AnAwfullyLongStreetName<span>&nbsp;</span>12
  </div>
  <div class="floatLeft"><span>,&nbsp;</span>9000<span>&nbsp;</span>Gent</div>
</div>