Question

我需要换一根长绳子，并希望强线在断线处突破。所有浏览器都必须支持该解决方案。

b和d'的中断应如下：

Aaaa Bbbbbb
bbbbbbbbbb
Ccccc Dddddd
ddddddddddd

标签自动换行：break-word会断开字符串，但在休息之前不会填充该行。这是发生的事情：

Aaaa 
Bbbbbb
Bbbbbbbbbb
Ccccc 
Dddddd
ddddddddddd

标签word-break：break-all完全符合我的需要，但在Firefox和ie7及以下版本中不起作用。它仅适用于Chrome，Safari和ie8。

text-wrap标签完全符合我的需要，但任何浏览器都不支持。

有什么建议吗？

仅供参考：我目前正在使用PHP管理这个休息时间。

Answer 1

使用PHP，将插入要放置换行符的位置。这是zero-width space character。

Answer 2

一种可能的解决方案是用不可破解的空白字符替换您的空格： 

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#container
{
  word-wrap: break-word;
  width: 100px;
  background-color: rgb(200, 200, 200);
  font: 14px monospace;
}
</style>
</head>
<body>
<div id="container">
Aaaa&nbsp;Bbbbbbbbbbbbbbbb
Ccccc&nbsp;Ddddddddddddddddd
</div>
</body>
</html>

非常重要的说明： 让你所描述的行为也适用于textarea的：

<textarea onkeyup="this.value = this.value.replace(/ /gi, '\u00A0');"></textarea>

这将用不可破坏的空格（ ）替换普通空格。

Answer 3

也许

word-break: break-all;

或者

white-space:normal;

没有经过测试，只记得过去：）

设置换行的自动换行的替代方法

3 个答案: