如果它在行尾,我怎么能让逗号消失？

Question

我希望在我的网页上设置一个逗号,这样,如果它位于中间的文本被分割,使得逗号出现在该行的末尾,则逗号消失.我怎样才能做到这一点？

---

你问我为什么要这么奇怪？我有一个街道地址,我想在宽视口上看起来像这样:

1600 Pennsylvania Ave,Washington,DC 20500

...但是在较窄的视口上,我希望它看起来像这样:

1600 Pennsylvania Ave
Washington,DC 20500

我已经得到它总是在正确的点使用分割文本white-space: nowrap;,但我不知道如何防止这个讨厌的逗号出现在地址的第一行的末尾.

Answer 1

将地址的每个部分包裹在一个<span>.然后使用伪元素在较大的屏幕上添加逗号.

.address span {
    display: block;
}    
@media( min-width: 480px ) {
    .address span {
        display: inline;
    }
    .address span:after {
        content: ', ';
    }
    .address span:last-of-type:after {
        content: '';
    }
}

<div class="address">
    <span>1600 Pennsylvania Ave</span>
    <span>Washington, DC 20500</span>
</div>

http://jsfiddle.net/bukwpthg/

编辑

合并了Paulie_D的建议.CSS现在支持多行/跨度而不是两行.它将为<span>除最后一个之外的每一个添加逗号.

<div class="address">
    <span>1600 Pennsylvania Ave</span>
    <span>Washington</span>
    <span>DC 20500</span>
</div>

http://jsfiddle.net/bukwpthg/3/