隱藏的元素，如果下一個是在不同的行

街道號碼，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

隱藏的元素，如果下一個是在不同的行

回答

相關問題