HTML 中的任意換行符？

Question

我正在尋找一種方式來指定一個行應該打破，如果它不適合它的方式類似於線­ （軟/酌情連字符），但有一個空格。 我嘗試使用谷歌搜索它，但沒有得到很多相關的點擊（盡管指定了“html”，但主要是針對 InDesign），我得到的是一些人說他們不知道一種方法。

前任。

你好我的名字
是 foo。
對比
你好，
我的名字是 foo。
但如果有可用空間：
你好，我叫 foo。

為了具體起見，我的意思不是white-space: normal/nowrap/pre/…而且我不想像<br />那樣強制中斷。

我使用的是 AngularJS，所以大多數事情都是通過 JavaScript 處理的，所以如果有一種簡單/高效/聰明的方法來做到這一點，我願意接受它。

Answer 1

以指示換行符不應字之間出現，使用NO-BREAK SPACE，或''，字與字之間。 任何正常的空間都是易碎的。 所以你可以寫例如

Hello, my name is foo. 

如果您更願意指出允許的中斷（根據您在下面的評論），您可以將文本包裝在nobr元素（非標准，但像魅力一樣）或您為其設置white-space: nowrap任何元素中white-space: nowrap ，從而禁止除非明確強制或允許，否則換行。 然后，您將使用<wbr>標記（非標准，但是...）或字符引用​ 或​ （對於冰零寬度空間）在允許換行的空格之后，例如

<nobr>Hello, <wbr>my name <wbr>is foo.</nobr>

<wbr>和 ZERO WIDTH SPACE 之間的選擇是一個棘手的問題，主要是由於 IE 的奇怪之處。

Answer 2

您可以使用<wbr>標簽。

編輯：如評論中所述，您可以使用零寬度空間： ​ （另請參閱： nbsp 的反義詞是什么？ ）

Answer 3

我不認為有任何本地方法可以做到這一點，但是當我真的需要這種東西時，我一直在使用一個 hack：

var str = "Hello,<br>My name is foo.";

str = str.replace(/ /g, '&nbsp;').replace(/<br>/g, ' ');

基本上，使用不間斷空格來分隔您不想中斷的單詞。

在此處查看操作： http : //jsfiddle.net/5xmt6/ （調整窗口大小以查看其反應）。

---

注意：這是非常hacky的，並且引入了它自己的一組問題； 即：如果視口變得非常狹窄，文本的其余部分將不會換行。

Answer 4

這是一種仍然有效的技術：使用inline-block跨度將文本分成組。

https://jsfiddle.net/mindplay/7aeyp3hs/

請注意，我正在使用@media規則在非常小的設備上關閉此效果，在這些設備上，文本將像文本正常流動一樣流動。