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

【问题标题】：How can this effect (line breaks) be achieved with CSS and/or Javascript如何使用 CSS 和/或 Javascript 实现这种效果（换行符）
【发布时间】：2012-10-28 12:13:41
【问题描述】：

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

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

【问题讨论】：

是什么让第一行比最后一行更快？
如果没有额外的 html/css，这不会发生，因为每一行都以不同的宽度中断，而且有些随意。我不知道如果 a) 你想在每一行上保持相同的文本，而 b) 不改变字体大小，你将如何使这个文本响应。根本不需要Javascript。
我希望线条样式相同，文本/单词可以在不同的行中，但是如果我使用
，标签，我认为这是不可能的。
“如果我让它响应，我不能在任何我想要的地方添加换行符” - 这个陈述是正确的。如果您打算在流畅的布局中使用此设计，请忘记手动控制换行符，只需让标题自然流动即可。
响应式是什么意思？

标签： javascript html css newline

【解决方案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>

【讨论】：

这有点像我所做的，但是我们不能让它响应正确吗？

【解决方案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>

还是我误解了这个问题？

【讨论】：

这有点好，但是网络可以让这个响应吗？
你所说的响应式是什么意思？
响应式我的意思是 1. 要么只输入不带 br 或 span 标签的文本，然后以某种方式添加这个新的线条样式，并且根据浏览器的宽度，这个标题的宽度会自动改变，其他一切都将保持不变.即使我们以某种方式实现了这一点 2. 能够在任何我想要的地方放置换行符而不会弄乱它的默认行为。

【解决方案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 /> 或类似的方式无法响应。

【讨论】：

是的，你确实解决了这个问题，但是一旦我使用 h2 标签而不是你一开始使用的 span 标签，它就不起作用了......但我认为没有其他的方式（CSS）...
H2 是块元素，span 是内联元素。如果你真的想用H2，插入：display:inline;到类 .headings ，它会工作