CSS隐藏文本（不计空格）而不是子元素

我创造了这个小提琴证明我有这个问题： https://jsfiddle.net/gpb5wx8h/CSS隐藏文本（不计空格）而不是子元素

<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，因此更改布局不是一种选择。

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

来源

2017-04-19 SheperdOfFire

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>

来源

2017-04-19 11:34:15 Vixed

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

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

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

来源

2017-04-19 11:22:45

'知名度'在这里是多余的。实际上，'visibility collapse'仅适用于......表格行，列，列组和行组。 – raina77ow

好的，所以不要使用那样的能见度。可以肯定的是，将字体大小设置为0被认为是不好的做法？ – SheperdOfFire

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

CSS：

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

来源

2017-04-19 11:26:48

我无法控制HTML输出，所以我不能像在你的小提琴中那样添加一个额外的元素。 – SheperdOfFire

这只是您的情况的解决方法，因为html无法控制。如果文本增加，你需要重新调整CSS。 https://jsfiddle.net/gpb5wx8h/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>

感谢

来源

2017-04-19 11:42:13

CSS隐藏文本（不计空格）而不是子元素

回答

相关问题