html - 如何删除换行的 html？

Question

假设你有:

<h1>800.BUY.WIDG &ndash; Call&nbsp;Now!</h1>

但您希望 – 仅在该行不换行时出现。

我可以这样做:

<h1>800.BUY.WIDG</h1> <span class="stylistic_ndash">&ndash;</span> <h1>Call&nbsp;Now!</h1>

然后我可以使用媒体查询在换行时删除 span 元素。

问题是，当页面上有多个这样的元素，每个元素都以不同的视口(viewport)宽度换行时，这种方法很快就变得站不住脚了。有没有更好的办法？

谢谢!

Answer 1

有点奇怪的解决方案，但您可以使用绝对定位的破折号和 overflow: hidden; 来伪造此行为在容器上。

看这个例子:

http://jsfiddle.net/e00hgrhb/1/

我已经设置了 h1成为overflow: hidden;然后用 span 包裹这两个元素元素。然后这是让它工作的主要样式:

h1 .item + .item {
    position: relative;
}
h1 .item + .item:before {
    content: "-";
    position: absolute;
    right: 100%;
    margin-right: 0.5em;
}

任何.item接下来是另一个.item设置为 position: relative;它是 :before伪元素用于创建破折号。我使用 right: 100%; 定位了破折号使其完全位于框架之外，位于文本的左侧。 (我在它上面以及每个 .item 上都留了一个边距，让破折号有一些呼吸的空间)

那么这一切有什么用呢？因为破折号完全位于它包含 .item 之外, 它不会占用流中的任何空间，因此当容器太小而无法容纳这两个元素时，文本的左边缘会保持紧靠容器的左边缘。这意味着破折号现在也完全在 h1 之外。元素。

因为h1的溢出被隐藏，破折号似乎不再存在。

---

是最好的解决方案吗？我不知道……这件作品是旁观者眼中的美。但它是一个解决方案，并且不需要一堆 javascript 来进行相对较小的更改。

---

编辑:我必须添加 display: inline-block;到 .item让它在 Firefox 中工作的类