创建 Facebook 帖子预览

Question

我们有一个网站，允许客户将图片和视频直接发布到他们的粉丝专页墙上。我们的一些客户要求对文本进行“发布预览”，以便他们了解在将文本提交到 Facebook 后单词的对齐方式。

所以，我的工作就是实现这个，到目前为止我所做的是：

帖子文字写在textarea：

 <textarea id="fbMessage" name="message" placeholder="Enter your message here" rows="4" cols="47"></textarea>

我创建了一个将用作帖子预览的 div，我将其宽度设置为类似于 Facebook 中用户内容文本的实际 div。在 div 中，我创建了一个将获取文本的段落，段落字体样式的设置与 Facebook 用户内容文本样式完全相同：

<div id="preview" style="margin: 10px auto; width:366px; background: #EDEDED; border: solid 1px #CCC; padding: 10px; word-wrap: break-word;">
   <p id="previewText" style="font-size: 13px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;">Facebook Preview</p>          
</div>

我使用word-wrap: break-word; 来强制文本换行。

最后是一个 Javascript，它将文本从 textarea 复制到预览 div：

var form = document.getElementById('newFBForm');
var TheTextBox = document.getElementById("fbMessage");
var textAreaText = TheTextBox.value;

//Is used to preserve whitespace and new lines from the textarea to the div//    
previewText = textAreaText.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp");

document.getElementById('previewText').innerHTML = previewText;

我的问题是，有时我会像在 Facebook 上一样对齐预览，这是一个示例：

• 在 Facebook 上：

• 在我的预览 div 上：

但有时我会得到不同的对齐方式，这是示例：

• 在 Facebook 上：

• 在我的预览 div 上：

您可以通过 word11111111 看到问题。这只是一个示例，但有不同的文本结构会产生与实际帖子不同的预览。

我错过了什么吗？或者我的实施有问题？您有什么想法可以改进或添加一些东西吗？

更新

尝试使用word-wrap: normal;时会发生这种情况：

Answer 1

//Is used to preserve whitespace and new lines from the textarea to the div//    
previewText = textAreaText.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp");

您正在用 不间断空格 替换每个空格字符（替换 \n 后留下的） - 当然即使使用 word-wrap:normal 也会给您带来奇怪的效果……因为您'正在有效地将每一行文本变成一个“单词”，因为 actual 单词之间的空格是禁止被破坏的……

Answer 2

我建议您使用 Firebug 或类似工具来提取 Facebook 使用的确切 CSS 属性并将它们应用到您的 div 容器。这应该很容易导致您正在寻找的结果。其他 CSS 属性可能会产生轻微影响文本显示方式的副作用。

Firebug 和 Chrome 检查器允许查看所有 CSS 属性及其来源。

Answer 3

问题是由word-wrap: break-word; 定义引起的。请改用word-wrap: normal;；单词将不再分成两行。

另外，通过添加 max-width: 100%; 甚至 width: 100%;，确保您的 p 不会扩展到您的 div 之外。