Question

假设你有：

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

但您希望仅在

我可以这样做：

–

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

问题在于，当在页面上有多个像这样的项目时，这种方法很快变得难以处理，每个项目都以不同的视口宽度进行包装。还有更好的方法吗？

谢谢！

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中使用

如何在换行中删除html？

1 个答案: