Home/ Questions/Q 8747517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:22:07+00:00

Right now i am using multiple heading tags and a css class to achieve

  • 0

Right now i am using multiple heading tags and a css class to achieve the effect shown in the image below, Is there any way to achieve this by using just a single heading/line and css?

Current Code :

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

Expected Code

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

The main problem with this according to me is, I cannot make it responsive without decreasing font size, padding, etc which i don’t want.

And even if i make it responsive i cannot add line breaks wherever i want without using other tags or javascript.

How did you guys get around this?

How can i achieve this effect using a single heading/any tag and with css

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    one, of the tons of solutions

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

    with this styles in <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>

    EDIT: second variant

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

    with this markup

    <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>
    • 0