2016-12-30 15 views
1

に縮小さの後に、私は私の文書に次のようなものを持って動作しません。出力前にそれを縮小化するためのPHPコード:CSS単語間隔プロパティは、HTMLをPHP

ブラウザにこれを返し、
ob_start(function($html) {return preg_replace('/>\s+</','><',$html);}); 

...html goes here... 

ob_end_flush(); 

.batman { 
 
    word-spacing: 100px; 
 
} 
 
.batman > div { 
 
    display: inline-block; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}
<div class="batman"><div>hello</div><div>world</div></div>

ので、ここで問題です:HTMLが1行にある場合は

word-spacing CSSがなくなっている、または私は無視し、言う必要があります。

"hello"と "world"の2つのdivの間には100pxのスペースはありません。

word-spacingを保存するにはどうしたらいいですか?コードを1行に保存することもできますが、実際には1行に自分で入力するか、

また、word-spacingがまだ動作することを確認するために、私の単純化されたミニスクリプトにどのような変更を行うことができますか?

条件:しています! divがインラインブロックである必要があります。

+0

pesudo-要素を使用することができます最初のdivの先頭または2番目のdivの開始 – Dale

+0

指定されたdiv内の文に単語の間隔が適用されます。あなたはそれぞれの単語を自分のdivにラップしています。ワードスペースはそれほど機能しません。単語の間隔を使用する場合は、HTMLを処理した後にHTMLがこのように表示されます。

hello world
Korgrue

+1

「 」を使用して空白を作成します。 - >それのようなもの: '

hello 
world
' – pol

答えて

1

word-spacingが最初のdivの後にスペースを1つ追加して、縮小されたHTMLで動作させる必要があります。 PHPを変更する必要はありません。

エスケープされたUnicodeシーケンスを含むCSS擬似要素をスペースに使用するだけです。

.batman { 
 
    word-spacing: 100px; 
 
} 
 
.batman > div { 
 
    display:inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.batman > div:first-child::after { 
 
    content: "\00a0"; 
 
}
<div class="batman"><div>hello</div><div>world</div></div>

+0

thats素晴らしい考えが、私は複数の子要素を持っているかもしれません。現在、 ":after"を各子供に適用しようとしていますが、そのスペースは文字通り可視の幅で0になります。フォントサイズ0?負のマージン?..正確なここに来ていないので....閉じる:) –

+0

これを見てください:https://codepen.io/anon/pen/apozPX、各行のCSSは同じですが、最初です行は1行に置かれています....それは2行目と同じように見える必要があります。 –

+0

現在MS Edgeにあります。どちらの行も同じです。 ChromeとFFを今日後でチェックします。 –

2

これはハックソリューションであることに注意してください。とにかく、あなたはどちらかの端にスペースを追加してみてください、HTMLが一行にフラット化されたとき、それはで動作するため、文字通りスペースがないからだと

.batman div { 
 
    display: inline-block; 
 
} 
 

 
.batman div:first-child { 
 
    content: ''; 
 
    padding-right: 100px; 
 
}
<div class="batman"><div>hello</div><div>world</div></div>

関連する問題