Question

现在我使用多个标题标签和一个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的情况下随时随地添加换行符。

你们是怎么解决这个问题的？

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

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

编辑：第二个变种

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

Answer 2

不需要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>

或者我误解了这个问题？

Answer 3

我有点解决了这个问题。看看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>

与HTML相同，只是我使用了span而不是h2

和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 />或类似的方式响应。

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

3 个答案: