19

如果我想在看起来像三个空格的行中间有空格,但如果行太长仍然可以打破,我可以在 HTML 中使用什么?

常规空格被折叠(一系列空格看起来与单个空格相同),并且在不间断空格 ( ) 处,行不能被打破。

更新:我认为我真正想要的是一个仍然可以打破长行的<pre>标签(我需要显示源代码)。

4

8 回答 8

24

我实际上有你正在寻找的确切答案。我到处搜索这个答案,没有任何人建议完美。所以,我想出了一个解决方案并尝试了它,并且发现它没有任何缺陷!

加罗实际上是对的(他只是没有解释或完全接受)。解决方案不是&nbsp;单独放置,而是放置&nbsp;<wbr>. 只需进行简单的搜索和替换,然后<wbr>在每个&nbsp;. 完美运行!

<wbr>标签是所有主要浏览器都支持的鲜为人知的标签,它告诉浏览器仅在需要时才在此处放置换行符。

更新:我发现一个浏览器在 IE 8 中不能完全正常工作!他们居然把<wbr>标签拿出来了!我通过创建一个类来解决这个问题:

.wbr:before { content: "\200B" }

而不是替换&nbsp;&nbsp;<wbr>,而是将其替换为以下内容:

&nbsp;<wbr><span class='wbr'></span>

在 PHP 中,这看起来像:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

不要忘记添加类。

显然,这有点过分了,用所有这些替换了一个空格,但它确实可以按预期工作,因为我从未见过它对我有用的标记。

如果这太乱了,另一种解决方案是将双空格换成a,&nbsp;然后是一个普通空格。这将交替&nbsp;和正常空间并在我的测试中工作。

在 PHP 中,这看起来像:

$text = str_replace("  ","&nbsp; ", $text);

希望这可以帮助!我对此进行了足够的研究;我想我应该把它传下去。

于 2009-08-18T19:29:23.060 回答
13

一个或多个 em 空格 ( ) 怎么样?当然,这取决于用户的字体大小。如果这在您的设计中不起作用,请考虑使用 en 空格 ( )。

您可能还想查看维基百科上的各种空间表。

于 2009-03-03T06:55:01.077 回答
4

如果您的目标不是 IE(8 标准模式除外):

<span style="white-space: pre-wrap">   </span>

对于 IE,<span style="width:3ex"></span>在 quirks 模式下工作,所以合并它们并...

<span style="width:3ex;white-space:pre-wrap">   </span>

这似乎在我尝试过的任何地方都有效......除了 IE7 标准。哦!

于 2009-03-03T06:48:13.010 回答
4

两个不间断空格之间的空格不会起作用吗?

   

于 2009-03-03T07:02:10.777 回答
3

<wbr>怎么样?

于 2009-03-03T07:50:55.793 回答
2

两个&nbsp;后跟一个常规空格怎么样?唯一的缺点(据我所知)是,如果换行符自然落在常规空格处,由于不间断空格,您将在前一行有一些尾随空格,但我没有'认为这不会对页面的实际外观产生影响。

于 2009-03-03T06:46:12.127 回答
0

最好退后一步,问问你要渲染的是什么。这个超宽的空间意味着什么?

于 2009-03-03T07:59:49.360 回答
-1

它在您的文本空间示例之间的左侧空间提供 100px

span style="margin-left:100px;"

(n_n)

于 2009-04-20T04:27:05.880 回答