Question

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

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

1600 Pennsylvania Ave，Washington，DC 20500

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

1600 Pennsylvania Ave
华盛顿特区20500

我已经知道总是使用white-space: nowrap;将文本拆分到正确的位置，但是我不知道如何防止这个讨厌的逗号出现在地址第一行的末尾。< / p>

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/

Answer 2

<强> jsBin demo

1600 Pennsylvania Ave<span class="sm-break">,</span> Washington, DC 20500

@media (max-width: 480px)  {
  .sm-break{ display:block; height:0; visibility:hidden; }
}

将您的逗号包装成span，将其设置为block，将hidden设置为较小的屏幕

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

2 个答案:

修改