HTML 中的空白格式问题答案

【问题标题】：White-space formatting concerns in HTMLHTML 中的空白格式问题
【发布时间】：2011-11-17 19:27:59
【问题描述】：

我选择的数据包含（可以是长字符串和“空白”），

示例：

$row['desc'] = 'abcd       ABCD   1234 more..  "

<td><?=$row['desc']?></td>

但是当我在浏览器的 HTML 表格中显示它时，我看不到数据库中的空格格式。我想保留数据库中的格式。

在 FireBug 中，我看到的数据格式与数据库中完全相同。

[*] 保留所选数据之类的格式，我尝试过

  $display_desc = array(" ","&nbsp;",$row['desc'])

而我的$row['desc'] 是动态字符串

但是如果我喜欢，当$row['desc'] 长字符串不换行时会出现问题。

有人知道这种情况下的问题是什么吗？

谢谢

在 HTML 中编辑示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test Document</title>
</head>

<body>
<table border="1">
  <tr>
    <td>Short data</td>
  <td style="WORD-BREAK:BREAK-ALL;">
  long data      long data     long data     long data     long data     long data     long data    long data    long data  long data  long data      long data     long data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data 
  </td>
    <td style="WORD-BREAK:BREAK-ALL;">
  long data      long data     long data     long data     long data     long data     long data    long data    long data  long data  long data      long data     long data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data data     long data     long data     long data     long data    long data    long data  long data 
  </td>

</table>
</body>
</html>

【问题讨论】：

标签： php html whitespace

【解决方案1】：

包裹在<pre>标签中，然后应用一些css：How do I wrap text in a pre tag?

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

使用您的示例 html 进行演示：http://jsfiddle.net/B98jc/

【讨论】：

【解决方案2】：

浏览器将两个或多个常规空格变成一个空格。

使用不间断空格 (&nbsp;) 来告诉浏览器呈现所有空格字符。如果您在包装时遇到问题，您可以使用 CSS 来控制它。但是请记住，浏览器希望将字符串分解为实际上可以中断的内容，例如常规空格。您可能必须在这些不间断空格中插入一个常规空格（或使用一些花哨的 JavaScript）来控制换行。

话虽如此，您似乎想要构建一个模拟来自数据库的数据的表结构。将$row 记录中的整个字符串放入单个表格单元格并不能真正解决该问题。您的数据看起来是固定宽度的格式，因此您可能需要遍历每一行数据并为第一列获取前 x 个字符，下一个 x 第二列的字符，依此类推。

【讨论】：

所以我已将 whitspce 删除到但是如果有长字符串，就会有问题，文本不换行。我该如何解决这个问题。谢谢
@Transformer：阅读我的编辑。浏览器需要字符串中的某些内容才能真正中断，它不会中断非中断字符。您可以通过将单个空格替换为 <span class="spacer"></span> 之类的东西并使用一些 CSS (.spacer { display: inline-block; width: 5px; }) 来欺骗浏览器，因此每个 <span> 大约是 1 个字符宽。然后浏览器会根据需要包装内容并使其看起来有空格。
我不太明白，我用真正的html代码编辑了我的问题，谢谢你的帮助。

【解决方案3】：

你为什么不把输出包装在<pre> 标签中呢？这将保留您现有的格式。

走那条路有问题吗？还是需要替换空格？

【讨论】：

如果你的长数据中有长字符串数据应该自动换行。
@Transformer，你会在什么条件下包装？包装最终会破坏您的格式，这是您不想要的。请澄清。
@Jakub 我认为他想要的行为与您将文本粘贴到带有 wordwrap 的记事本中的行为相同。它保留了空间，但仍然换行。
@Davy8，好吧，那是有道理的，他最初并没有真正指定“自动换行”作为要求。只是他不想松散格式。我的好答案 +1。