html - CSS隐藏文本(不占用空间)但不隐藏子元素

Question

我创建了这个 fiddle 来演示我遇到的问题: https://jsfiddle.net/gpb5wx8h/

<button id="add-redirect" class="ui-button ui-widget ui-corner-all ui-state-default" name="add-redirect" value="add-redirect" type="submit">
    <span class="ui-button-text">
        <i class="fa fa-plus">visible</i> not visible
    </span>
</button>
<style>
    button .ui-button-text {
        visibility: collapse
    }
    button .ui-button-text i.fa {
        visibility: visible
    }
</style>

正如您在 fiddle 中看到的那样，文本确实不可见，这正是我想要的，但它仍在我的按钮中占用空间，这正是我不想要的。

我无法更改 HTML，因此无法更改布局。

我希望文本完全不可见并且完全不占用元素中的任何空间。同时，子元素应该是可见的。

Answer 1

visibility: collapse; 仅适用于表格元素。 collapse 删除行或列，但不影响表格布局。行或列占用的空间将可用于其他内容。在你的情况下，你可以简单地使用这个技巧:

button .ui-button-text {
    font-size:0
}
button .ui-button-text i.fa {
    font-size:12px;
}

<button id="add-redirect" class="ui-button ui-widget ui-corner-all ui-state-default" name="add-redirect" value="add-redirect" type="submit"><span class="ui-button-text"><i class="fa fa-plus">visible</i> not visible</span></button>