創建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：

• 在我的預覽格：

但有時我得到一個不同的排列，這裏是例子：

• 在Facebook上：

• 在我的預覽格：

你可以看到word11111111問題。這只是一個例子，但是有不同的文本結構可以產生不同的預覽，即實際的文章。

我錯過了什麼嗎？或者mybe我的實現有什麼問題？你有什麼想法來改進它或增加一些東西嗎？

UPDATE

這種嘗試使用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奇怪的效果......因爲你effectingly使每行文本成爲一個「單詞」，因爲實際的單詞之間的空格被禁止被破壞...

Answer 2

我會建議你使用螢火蟲或類似工具來提取由Facebook的使用的確切CSS屬性和應用他們到你的div容器。這應該很容易導致你正在尋找的結果。其他CSS屬性可能會產生副作用，影響文本的顯示方式。

Firebug和Chrome檢查器允許查看所有CSS屬性以及它們來自哪裏。

Answer 3

該問題是由word-wrap: break-word;定義引起的。改爲使用word-wrap: normal;;單詞將不再分爲兩行。

此外請確保您的p不會擴展到您的div之外，方法是加入max-width: 100%;或甚至width: 100%;。