隐藏的元素，如果下一个是在不同的行

街道号码，POSTALCODE市

但是，如果地址是太长，无法在同一行，它需要被显示为以下

街道号码

PostalCode城市

请注意缺少逗号。我已经想出了如何做到这一点的突破，但我坚持在逗号。有没有什么办法可以做到这一点只是在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/

来源

2016-12-06 MrZarq

这不可能 - 在我所知的 - 用CSS做，因为你会基于其下面的兄弟的位置造型兄弟，有没有CSS选择器为'不同的行'*或*'以前的兄弟姐妹'。这可以用JavaScript来完成，但即使如此，我还是建议改变你的HTML，因为看起来 - 对我来说 - 非常奇怪（尽管它在你的用例中可能是完美的）。 –

HTML可以更改。它在用例的第一部分（即在特定点进行分割）运行良好，但可能还有其他解决方案也可以正常工作。但我不确定这个要求是否可以实现。 – MrZarq

如何这样的事情。逗号是绝对定位的，这样当第二个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>

来源

2016-12-06 19:09:27

是的，这个工程！ – MrZarq

隐藏的元素，如果下一个是在不同的行

回答

相关问题