如何用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實現這種效果（換行符）

回答

相關問題