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

使用font-size按钮 - 无需定义可见性。

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

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

<强> CSS：

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

Answer 4

希望这有助于你

button .ui-button-text {
    visibility: collaps
}
button .ui-button-text i.fa {
    visibility: visible
}
button{
max-width: 60px;
overflow: hidden;
height:23px;
}

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

由于

CSS隐藏文本（不占空间）但不隐藏子元素

4 个答案: