根据视口宽度改变按钮文本

Question

我在主页中有一个关闭lightbox的按钮，它的文本显示为“关闭”，并且右对齐。但是当视口宽度小于400像素时，它可能会与标题文本重叠。

因此，我想使用媒体查询将其替换为“X”。

我尝试了 .button:before，这样可以实现，但我无法通过这种方式摆脱原始的“关闭”文本。

如何只使用CSS来实现此目标？

- Hedge

---

使用.button:before设置Close，请参考此fiddle。 - insertusernamehere

@Hedge，你不能使用CSS来添加或删除HTML文本，这正是JS的作用，insertusernamehere给出了正确的答案！ - Alexander Solonik

是的，你说得对。@insertusernamehere 你能把这个发表为一个答案吗？ - Hedge

@ Alexander Solonik Css可以添加或删除HTML文本，点击链接查看示例。 - Roshan Padole

Answer 1

使用伪元素:before设置按钮的值，同时将其默认值设置为"关闭"。下面是一个示例：

HTML

<span class="button" title="Close"></span>

CSS

.button:before {
    content: 'Close';
}

@media screen and (max-width: 200px) {
    .button:before {
        content: 'X';
    }
}

演示

购买前先试用一下

- insertusernamehere

Answer 2

<a><span class="mob-view">X</span><span class="normal-view">close</span>

使用媒体查询显示：

.mob-view {
    display:block;
}
.normal-view {
    display:none;
}

- Maheswaran S

---

这个方法可以行得通，但我无法更改按钮的HTML。 - Hedge

这就是为什么需要使用 :after 属性的原因。 - Roshan Padole

Answer 3

考虑你的按钮：

<button>Close</button>

现在让我们将“Close”替换为“X”：

在您的媒体查询中设置以下CSS：

button {
    visibility: hidden;
}

button:after {
    content:'X'; 
    visibility:visible;
}

试试这个 http://jsfiddle.net/ZBj2m/685/

希望对你有用

- Roshan Padole

---

这是一个不错的解决方案。不幸的是，它在IE9或更高版本中无法工作。似乎IE不能像预期的那样处理伪元素上的visibility。 - insertusernamehere

Answer 4

试试这个：

HTML：

<div id="lightBox">
    <h1>Heading Goes Here</h1>
    <button id="close">Close</button>
</div>

CSS

#lightBox{
    width:100%;
    height:100%;
    background:grey;
    position:relative;
}
#close{
    position:absolute;
    right:5px;
    bottom:5px;
    border:none;
    padding:5px;
    height:25px
}
@media screen and (max-width:360px){
    #close{
        top:-10px !important;
        right:-10px !important;
        width:25px; 
        border-radius:25px;
        height:25px;
        text-indent:-99px;
        background-color:red;
    }
    #close:before{
        content:'X';
        text-indent: -14px;
        color: white;
        float: right;
    }
}

演示 Fiddle

- Rajesh