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隱藏文本（不計空格）而不是子元素

回答

相關問題