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

Question

我创建了这个小提琴来演示我遇到的问题：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>

正如你在小提琴中看到的，文字确实是看不见的，确切地说是我想要的，但它仍然占用了我按钮中的空间，这正是我不想要的。

我无法更改HTML，因此更改布局不是一个选项。

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

Answer 1

visibility: 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>

​

Answer 2

使用font-size表示按钮-不需要定义可见性.

button .ui-button-text {
    font-size: 0;
}

button .ui-button-text i.fa {
    font-size: 14px; // choose font size you want
}

Answer 3

检查这解决方案是否有用。需要在html中进行一些结构更改。

CSS:

button .ui-button-text i.fa {
    display:block;
}
button .ui-button-text i{
  display:none;
}