Question

我需要在网页上显示地址，并且需要显示如下

Street Number，PostalCode City

但是，如果地址太长而无法放在一行上，则需要显示如下

街道号码

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小提琴：https://jsfiddle.net/7w70fff1/1/

Answer 1

这样的事情怎么样？逗号位于绝对位置，因此当第二个div包装时，它位于容器视口的左侧，隐藏它。

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

如果下一个元素位于不同的行，则隐藏元素

1 个答案: