在HTML中，是否可以插入單詞換行提示？

Question

想象我有文本在DIV長，多字線：

你好，親愛的。請看看我們的報價。

的DIV具有動態寬度。我想用文字來包裝上面的文字。目前，包裹發生最大化第一線的長度字邊界：

|-DIV WIDTH------------------------------------| 
Hello there, dear customer. Please have a look 
at our offer. 

我寧願，包裹發生了句邊界上。但是，如果不需要包裝，我希望線條保持原樣。

爲了說明我的觀點，請看看各種DIV寬度，我想怎麼我的文字換行：

|-DIV WIDTH--------------------------------------------------------| 
Hello there, dear customer. Please have a look at our offer. 
|-DIV WIDTH-----------------------------------| 
Hello there, dear customer. 
Please have a look at our offer. 
|-DIV WIDTH--------| 
Hello there, dear 
customer. 
Please have a look 
at our offer. 

用的話，那麼這個詞包裹發生在提示你可以使用一個連字符音節邊界。如果不需要包裝，則­保持不可見。如果需要包裝時，­是它發生在哪裏：

magnifi­cently 

是否有在HTML暗示的文字環繞類似的方法？

Answer 1

單詞之間使用­或單詞之間使用<wbr>，因爲<wbr>不會引入連字符。

參見：

• quirksmode: <wbr> compat list

Answer 2

不太準確，但接近：http://jsfiddle.net/uW4h8/1/。

簡而言之，您應該爲您的文本容器設置white-space: nowrap;，並根據需要使用<wbr>在單詞之間插入中斷。

Answer 3

使用無間斷間隔U + 00A0（或 如果你有輸入字符作爲這樣的不便利的方式）單詞之間時，將線路不允許休息，否則爲正常空間。

當話包含連字符這樣可不行「 - 」，和其他一些字符，如括號，可能會導致問題爲好，因爲有些瀏覽器把它們作爲允許他們之後換行。請參閱http://www.cs.tut.fi/~jkorpela/html/nobr.html瞭解冗長的論文，包括處理問題的各種技巧。但是如果你只有普通的標點符號而沒有連字符，那麼你應該沒問題。

Answer 4

元素<wbr>和 經常加班，但並非總是如此。在設計一個靜態登陸頁面時，它們尤其有問題：（a）必須在各種屏幕和瀏覽器上工作，並且（b）必須看起來不錯。

在這種情況下，我想在各種不同的屏幕分辨率的過斷行提示控制。爲此，我使用<br>標籤和CSS。如果變得複雜，它可能會變得一團糟，但我發現它可以工作到一定程度。例如：

<p class='break-hints'> 
Hello there, dear customer. <br class='break-big'> 
Please have a look <br class='break-small'> at our offer. 
</p> 

然後，我使用CSS與媒體查詢來指示何時應該觸發各種中斷。

p.break-hints br { 
    display: none; 
} 

@media only screen and (max-width: 300px) { 
    p.break-hints br.break-small { 
    display: inline; 
    } 
} 

p.break-hints br.break-big { 
    display: inline; 
}