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,从而禁止换行,除非明确强制或允许的.然后,您将在空格后使用<wbr>标记(非标准,但是......)或字符引用​或​(对于冰零宽度空间)以允许换行,例如

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

<wbr>和ZERO WIDTH SPACE 之间的选择是一个棘手的问题,主要是由于IE奇怪.

Answer 2

你可以使用<wbr>标签.

编辑:如评论中所述,您可以使用零宽度空间 :( ​另请参阅:与...相反的是什么？)

Answer 3

我不认为有任何本地方法可以做到这一点，但每当我真正需要这种东西时，我都会使用以下方法：

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

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

基本上，使用不间断空格来分隔您不想中断的单词。

请参阅此处的实际操作：http://jsfiddle.net/5xmt6/（调整窗口大小以查看其反应）。

注意：这是非常hacky的，并且引入了它自己的一系列问题；即：如果视口变得非常窄，则文本的其余部分将不会换行。