如何使用CSS和/或Javascript实现这种效果（换行符）

现在我正在使用多个标题标签和一个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>

大家好，我怎么能只用一个
一行文本和css。现在我正在使用
多个h2标签和一个css类来实现这个效果。
只有css才能实现这一点，还是我也必须使用Javascript？

预期代码

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

大家好，我如何只用一行文本和css就可以实现这种效果。现在我使用多个h2标签和一个css类来实现这个效果。只有css才能实现这一点，还是我也必须使用Javascript？

据我所说，这方面的主要问题是，如果不减少字体大小、填充等我不想要的内容，我就无法使其响应

---

即使我让它具有响应性，我也无法在不使用其他标记或javascript的情况下在任何地方添加换行符

你们是怎么做到的

---

不需要CSS或JavaScript，只需使用

标记即可

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

嗨，伙计们，我怎么能只用一个


一行文本和css。现在我正在使用


多个h2标签和一个css类来实现这个效果。


只有css才能实现这一点，还是我也必须使用Javascript？

---

还是我误解了这个问题？

不需要CSS或JavaScript，只需使用

标记即可

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

嗨，伙计们，我怎么能只用一个


一行文本和css。现在我正在使用


多个h2标签和一个css类来实现这个效果。


只有css才能实现这一点，还是我也必须使用Javascript？

---

还是我误解了这个问题？

一个，众多解决方案中的一个

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

嗨，伙计们，我怎么能只用一个
一行文本和css。现在我正在使用
多个h2标签和一个css类来实现这个效果。
只有css才能实现这一点，还是我也必须使用Javascript？

在

h2.标题{
背景：#0f0；
填充：2px；
浮动：左；
}
h2.航向跨度{
清除：左；
显示：块；
浮动：左；
背景：#fff；
填充：1px；
保证金：1px；
}
h2.标题，清除{
清除：左；
边际：0px；
填充：0px；
浮动：无；
}

编辑：第二种变体

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

h2.标题{
背景：#0f0；
填充：2px；
显示：内联块；
字体大小：20px；
}
h2.航向跨度{
背景：#fff；
填充：1px；
保证金：1px；
线高：30px；
}

使用此标记

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

大家好，我怎么能只用一行文字和css就达到这个效果呢。现在我使用多个h2标签和一个css类来实现这个效果。只有css才能实现这一点，还是我也必须使用Javascript？

一个，大量解决方案中的一个

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

嗨，伙计们，我怎么能只用一个
一行文本和css。现在我正在使用
多个h2标签和一个css类来实现这个效果。
只有css才能实现这一点，还是我也必须使用Javascript？

在

h2.标题{
背景：#0f0；
填充：2px；
浮动：左；
}
h2.航向跨度{
清除：左；
显示：块；
浮动：左；
背景：#fff；
填充：1px；
保证金：1px；
}
h2.标题，清除{
清除：左；
边际：0px；
填充：0px；
浮动：无；
}

编辑：第二种变体

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

h2.标题{
背景：#0f0；
填充：2px；
显示：内联块；
字体大小：20px；
}
h2.航向跨度{
背景：#fff；
填充：1px；
保证金：1px；
线高：30px；
}

使用此标记

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

大家好，我怎么能只用一行文字和css就达到这个效果呢。现在我使用多个h2标签和一个css类来实现这个效果。只有css才能实现这一点，还是我也必须使用Javascript？

我解决了这个问题。在此处查看（删除div以查看响应）

HTML:

问题是文本的左右两侧没有填充。

---

还有。你不能在你想要的地方换行。这完全取决于你把它放在哪个容器里。如果你问我的话，这是很好的，因为这使它在某种程度上具有响应性，而这是

或类似的东西所不能做到的。

我解决了这个问题。在此处查看（删除div以查看响应）

HTML:

问题是文本的左右两侧没有填充。

---

还有。你不能在你想要的地方换行。这完全取决于你把它放在哪个容器里。如果你问我的话，它是好的，因为这使它以一种

或类似的方式响应，而这是不可能的。

是什么让第一行比最后一行早中断？如果没有额外的html/css，这是不会发生的，因为每一行都以不同的宽度中断，而且有些随意。我不知道如果a）你想在每一行上保留相同的文本，而b）不改变字体大小，你会如何使此文本响应。Javascript应该是不必要的。我希望行样式相同，文本/单词可以在不同的行中，但如果我使用
，标记，我认为这是不可能的。“如果我使其响应，我不能在任何我想要的地方添加换行符”-t