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 
//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 に答える
0

この問題は、定義によって引き起こされword-wrap: break-word;ます。word-wrap: normal;代わりに使用してください。単語が 2 行に分割されることはなくなります。

また、またはを追加して、pが拡張されないようにしてください。divmax-width: 100%;width: 100%;

于 2012-09-28T09:33:52.003 に答える