2013-11-28 90 views
0

是否有任何CSS字間距不會打破的字符?CSS字間距規範

例如,假設我給了我的元素一個大尺寸(等於元素寬度),以便它在每個單詞上都打破。因此,對於這樣的:

<div class="break">THIS BREAKS ON EACH LINE</div> 

我會得到:

--------- 
| THIS 
| BREAKS 
| ON 
| EACH 
| LINE 
|-------- 

有沒有我可以使用,不會打破行的任何字符。例如:

<div class="break">THIS BREAKS & EACH LINE</div> 

我想要的符號之後沒有中斷:

--------- 
| THIS 
| BREAKS 
| & EACH   <<<--- Here 
| LINE 
|-------- 
+0

您是否看到[demo](http://jsfiddle.net/gG78X/1/)? –

+0

它是你想要的工作的一部分。 –

回答

1

一般而言,white-space影響「單詞」之間的間隔在技術意義上:一個字是非空白字符的最大序列。所以,它實際上會影響所有的空格(空格,製表符,換行符)。然而,fixed-width space characters&ensp;不計爲空白,所以你可以寫

THIS BREAKS &&ensp;EACH LINE 

如果你不想「&」和「每一個」,擴大之間的間距。但這並不完全安全,因爲瀏覽器有時可能會以不同的方式處理字符。他們已經改變了&nbsp;的處理方式;它曾經是「不可拉伸的」,但不再是。

所以,安全的方式是真正

THIS BREAKS <span class=nows>& EACH</span> LINE 

與CSS

.nows { word-spacing: 0 } 

防止換行符是一個不同的問題,經常有人問,在SO回答。使用上面的安全方式,您可以使用不間斷空間而不是普通空間:

THIS BREAKS <span class=nows>&&nbsp;EACH</span> LINE 
0

您可以使用&nbsp;(不間斷空格),以防止休息......然而,這將maintain your word spacing

你最好的選擇是拋出一個有點jQuery in there,一拉:

CSS

.break{ 
    word-spacing:50px; 
    width:50px; 

} 

HTML

<div class="break">THIS BREAKS ON & EACH LINE</div> 

jQuery的

var txt = $('.break'); 
var ls=txt.css('word-spacing'); 
txt.html(txt.text().replace(' & ', '<span style="margin:0 -'+ls+' 0 0;"> &&nbsp;</span>')); 
+0

是的,這是我的第一個預感,但間距是不可接受的。我希望它不會破壞:) –

+0

@Yuval亞當 - 如果你正在設置CSS間距,你需要使用JS ..請看更新的答案 – SW4

+0

這是我們正在研究的解決方法,只需插入一個'  ',但我真的更願意使用一個實際的字符,它是一個空格,並被認爲是單個單詞的一部分。 –

0

使用非破壞空間&nbsp;這樣的:

<div class="break">THIS BREAKS &&nbsp;EACH LINE</div> 

see this demo

+0

請參閱@ ExtPro的答案,這會產生不必要的空間。 –

+0

請參閱演示http://jsfiddle.net/gG78X/ –

+0

您的演示根本不包含字間距。 –

1

我發現使用「薄不換行空格」字符(&#8239;),其行爲正確像樣的解決方法。

http://jsfiddle.net/RJ6KW/4/

+0

一個很好的竅門,雖然它在舊版本的IE上失敗了,它可能看起來徒勞無益,因爲字符的字形會渲染一個小盒子。 –

+0

@ JukkaK.Korpela - 我只關心這個項目的現代瀏覽器,但很好,謝謝。 –