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

一，大量的解决方案

<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>
于 2012-10-28T12:20:55.160 回答
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 回答
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>

与您的 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 />或类似的事情不会做。

于 2012-10-28T12:32:25.537 回答