创建Facebook帖子预览

Question

我们有一个网站，允许客户将图片和视频直接发布到他们的Fanpage墙上。我们的一些客户要求对文本进行“后期预览”，以便他们看到文字提交到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 查看问题。这只是一个例子，但是有不同的文本结构产生与实际帖子不同的预览。

我错过了什么吗？或mybe我的实施有问题吗？你有想法改进它或添加一些东西吗？

更新

尝试使用word-wrap: normal;时会发生什么：

Answer 1

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

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

Answer 2

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

另外，请确保p不会在div之外展开，只需添加max-width: 100%;甚至width: 100%;。

Answer 3

//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，这也会给你带来奇怪的效果......因为你有效地使每一行文字成为一个“单词”，因为实际单词之间的空格是被禁止的......