0

現在、複数の見出しタグと css クラスを使用して、下の画像に示す効果を実現しています。単一の見出し/行と css を使用してこれを達成する方法はありますか?

現在のコード:

<h2 class="heading">Hi guys, How can i achieve this effect using just a single</h2>
<div class="clearfix"></div>
<h2 class="heading">line of text and css. Right now i am using</h2>
<h2 class="heading">multiple &lt;h2&gt; tags and a css class to achieve this effect.</h2>
<h2 class="heading">Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

期待されるコード

<h2 class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

私によると、これの主な問題は、フォントサイズやパディングなどを小さくしないとレスポンシブにできないことです。

また、レスポンシブにしても、他のタグやJavaScriptを使用しないと、必要な場所に改行を追加できません。

どうやってこれを回避しましたか？

単一の見出し/任意のタグとcssを使用してこの効果を達成するにはどうすればよいですか

4

3 に答える 3

2

数多くのソリューションの 1 つ

<h2 class="heading">
    <span>Hi guys, How can i achieve this effect using just a single</span>
    <span>line of text and css. Right now i am using</span>
    <span>multiple &lt;h2&gt; tags and a css class to achieve this effect.</span>
    <span>Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
    <span class="clear"></span>
</h2>

このスタイルで<head>

<style type="text/css">
    h2.heading {
        background:#0f0;
        padding:2px;
        float:left;
    }

    h2.heading span {
        clear:left;
        display:block;
        float:left;
        background:#fff;
        padding:1px;
        margin:1px;
    }

    h2.heading .clear {
        clear:left;
        margin:0px;
        padding:0px;
        float:none;
    }
</style>

編集: 2 番目のバリアント

<style type="text/css">
    h2.heading {
        background:#0f0;
        padding:2px;
        display:inline-block;
        font-size:20px;
    }

    h2.heading span {
        background:#fff;
        padding:1px;
        margin:1px;
        line-height:30px;
    }
</style>

このマークアップで

<div style="width:300px;">
    <h2 class="heading">
        <span>Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</span>
    </h2>
</div>
于 2012-10-28T12:20:55.160 に答える
1

私は問題を解決しました。こちらをご覧くださいhttp://jsfiddle.net/7nafE/ (応答性を確認するには、div を削除してください)

HTML:

<span class="heading">Hi guys, How can i achieve this effect using just a single line of text and css. Right now i am using multiple &lt;h2&gt; tags and a css class to achieve this effect. Is it possible to achieve this only with css or do i have to use Javascript as well?</h2>

h2 の代わりにスパンを使用したことを除いて、HTML と同じです

そしてCSS：

.heading {
        background: white;
        line-height:2em;
        padding: 0.3em;;
    }

    body { /*not really neccessary to show, but anyway*/
        background: limegreen;
        font-family: verdana;
        color: #999999}

問題は、テキストの左右にパディングがないことです。そしてまた。必要な場所に改行を入れることはできません。<br />それはあなたがそれをどのコンテナに入れるか次第です.あなたが私に尋ねたなら、それはそれがうまくいかないような方法でそれを反応させるのでちょうどいいです.

于 2012-10-28T12:32:25.537 に答える
1

CSS や JavaScript は不要で、<br>タグを使用するだけです。

<h2 class="heading">
Hi guys, How can i achieve this effect using just a single
<br> 
line of text and css. Right now i am using 
<br>
multiple &lt;h2&gt; tags and a css class to achieve this effect.
<br>
Is it possible to achieve this only with css or do i have to use Javascript as well?
</h2>

それとも私は質問を誤解しましたか？

于 2012-10-28T12:19:14.077 に答える