0

我们有一个网站，允许客户将图片和视频直接发布到他们的粉丝专页墙上。我们的一些客户要求对文本进行“发布预览”，以便他们查看在文本提交到 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;它来强制文本换行。

最后一件事是将文本从 复制textarea到预览 div 的 Javascript：

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上

  • 在我的预览 div 上：

我的预览 div

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

  • 在Facebook上：

FB不好

  • 在我的预览 div 上：

我的预览 div 2

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

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

更新

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

ww 正常

4

3 回答 3

0

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

Firebug 和 Chrome 检查器允许查看所有 CSS 属性以及它们的来源。

于 2012-09-28T09:33:51.860 回答
0

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

还要确保您p不会div通过添加max-width: 100%;或什至扩展您的外部width: 100%;。

于 2012-09-28T09:33:52.003 回答
0 
//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...，这也会给您带来奇怪的效果，因为您实际上正在使每一行文本成为一个“单词” ”，因为实际单词之间的空格是不允许被打破的……</p>

于 2012-09-28T14:04:44.217 回答