CSS 隐藏文本（不带 space）但不隐藏子元素

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中看到的那样，文字确实不可见，正是我想要的，但它仍然在我的按钮中占用space，正是我不想要的.

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

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

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

检查 this 解决方案是否有帮助。需要在 html.

中进行一些结构更改

CSS:

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

Answer 3

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

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 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 隐藏文本（不带 space）但不隐藏子元素

CSS hide text (without taking space) but not child element

html

css

visibility