CSSの非表示（スペースを取らずに）テキストではなく、子要素

Question

は私が私がいる問題を実証するために、このフィドルを作成しました表示されていない、まさに私が望むものですが、それでも私のボタンのスペースは、まさに私が望まないものです。

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

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>

を助けてくれてありがとう