1

次の画像に示す効果を作成しようとしています。

ここに画像の説明を入力

文字列が折り返されるときに黒いボックスを作成するのではなく、テキストの背後にある黒い背景がよろめきます。これは、動的文字列の CSS だけで実現できますか?

4

4 に答える 4

3

これは実際には、スパンなどのインライン要素のデフォルトの動作です。次のコードは、この効果を持つはずです。

<span style="background-color: black; color: white">EYES ON<br/>FILM</span>

<br/>は説明目的であることに注意してください。テキストがブラウザによってラップされている場合にも機能します。div に対してこれを行う必要がある場合は、必ずdisplay: inlineスタイルを設定してください。

于 2013-01-14T12:47:39.650 に答える
1

これがその方法です。基本的な考え方は、各単語を個別の div でラップし、インライン div をラップする幅で別の div 内にそれらの div をネストすることです。

<style>
    .foo {
      display: inline;
      background-color: #000;
      color: #fff;
      margin: 0;
    }

    .wrapper {
      width: 100px;
    }
</style>
<div class="wrapper">
<div class="foo">Here </div><div class="foo">is </div><div class="foo">some </div><div class="foo">text </div><div class="foo">exciting </div><div class="foo">isn't </div><div class="foo">it </div>
 </div>
于 2013-01-14T12:48:44.623 に答える
0

テキストを a<span>内に配置する<p>か、Teletype Text Element ( <tt>) または<code>タグを使用して機能します。

<tt>は HTML5 では受け入れられません。

jsfiddle の例: http://jsfiddle.net/gmDWP/

于 2013-02-22T13:56:28.873 に答える
0

これらの線に沿った何か？

http://jsfiddle.net/wxDa7/

<style>
    #a 
    { 
        width:50px; 
        font-size:20px; 
        line-height: 90%; 
        text-transform:uppercase; 
    }
    #a .b 
    {
         background-color:black; 
         color:white;  
    } 
</style>
<div id="a">
      <span class="b">Test&nbsp; test&nbsp;</span>
</div>

これは、定義された幅で自動ブレークします。%nbsp を使用します。テキストの後に余分なスペースを取得します。

于 2013-01-14T12:50:36.600 に答える