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

现在我正在使用多个标题标签和一个css类来实现下图中显示的效果，有没有什么办法可以通过使用只是一个标题/行和CSS？如何用CSS和/或Javascript实现这种效果（换行符）

目前代码：

<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

来源

2012-10-28 Random User

简答题：No. – Tomalak

是什么让第一行比最后一行快？ – PeeHaa

没有额外的html/css，这种情况不会发生，因为每一行都以不同的宽度断开，并且有些任意。我不知道如何让这段文字响应如果a）你想在每一行保留相同的文本，而b）不改变字体大小。 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>

这种风格在<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-28 12:20:55 bukart

这与我所做的有点相似，但是我们无法使其反应正确？ –

响应屏幕宽度？看我编辑，也许它有帮助 – bukart

是的，这有帮助。 –

无需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-28 12:19:14

这是好一点，但网络可以让这个响应？ –

*你的意思是*响应*？ –

通过响应我的意思是1.要么只是输入文本没有br或span标签，并以某种方式添加这种新的线条样式，并根据浏览器的宽度，这个标题的宽度将自动改变，其他一切将保持不变。即使我们以某种方式实现这一点2.能够在任何我想要的位置放置换行符而不会破坏其默认行为。 –

我有点解决了这个问题。看看这里http://jsfiddle.net/7nafE/（删除div来看看responsivness）

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，只是我用了一个跨度，而不是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-28 12:32:25

是的，你确实解决了这个问题，但只要我用h2标签代替你在开始时使用的span标签，它不起作用......但我不认为有任何其他方式（CSS）...... –

H2是块元素，跨度是内联元素。如果你真的想使用H2，插入：display：inline;到班级。首页，它会工作 –

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

回答

相关问题