使用 CSS 隐藏或删除 HTML 元素的部分内容

Question

问题

我无法改变下面HTML的输出方式，但我确实需要修改它的显示方式。我知道我可以用 jQuery 达到我想要的结果，但我想用纯粹的 CSS 来实现吗？

我到底需要做什么

我需要显示下面 HTML 中的 input，但 label 本身是多余的。标签可以留下或离开，我对此并不在意，但 Username 和 <br> 需要消失。

显然我不能使用 label[for="user_login"]{ display: none; }，因为这会失败，因为它会隐藏选择器中的所有内容。

原HTML

<label for="user_login">
    Username
    <br>
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

想要的HTML

<label for="user_login">
    <input id="user_login" class="input" type="text" size="20" value="" name="log">
</label>

jQuery接近

$(document).ready(function(){

    var username_label = $('label[for="user_login"]'),
        username_input = username_label.find('input');

    username_label.html(username_input);

});

为什么我不想用jQuery

有问题的登录显示因屏幕尺寸而异。在较小的设备上，我要求隐藏标签（以节省空间），而在较大的屏幕上，标签应该仍然可见。使用 jQuery 方法将在这两种情况下删除标签。

虽然我知道我可以在加载时检查屏幕宽度，然后使用 resize 事件（如有必要），但如果屏幕尺寸发生变化（例如在平板电脑上，从纵向到横向），标签可以被删除，然后在需要时不可见。

问题

我可以用纯 CSS 获得这个结果（或类似结果）吗？

Answer 1

试试这个 css:

label {
    visibility:collapse;
}

label input {
    visibility: visible; 
}

这是一个 jsfiddle： http://jsfiddle.net/entgqjzk/

我修改了在 Hide text node in element, but not children

找到的 css

编辑：

这不会像您指出的那样删除空格。我想不出比 jQuery 和 css 的组合更好的东西，它不是有史以来最漂亮的代码，但它确实适用于您无法控制 html:

http://jsfiddle.net/entgqjzk/2/

css class "hidden-for-mobile" 可用于例如与移动设备的单独样式表（或不同屏幕尺寸的伪选择器）结合使用

Answer 2

你试过伪类吗？ http://css-tricks.com/a-call-for-nth-everything/

Answer 3

感谢@geoffreydv 提出使用 visibility 的想法。

与此相结合，我能够使用下面的 CSS 有效地隐藏标签中文本占用的空白。

body.login #loginform label[for="user_login"],
body.login #loginform label[for="user_pass"]{
    display:        inline-block;
    height:         50px;
    position:       relative;
    visibility:     collapse;
    width:          300px;
}

body.login #loginform input#user_login,
body.login #loginform input#user_pass{
    margin:         0;
    position:       absolute;
    top:            0;
    visibility:     visible;
    width:          300px;
}

使用 CSS 隐藏或删除 HTML 元素的部分内容

Hide or remove part of the content of an HTML element using CSS

html

css

hide