注文言葉、そして私はこれと似た JavaScriptの内の単語のリストを持ってきちんと

を単語を置く：注文言葉、そして私はこれと似た JavaScriptの内の単語のリストを持ってきちんと

var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month", 
      "moon", "morning", "mother", "motion", "mountain", "mouth", "move", 
      "much", "muscle", "music", "nail", "name", "narrow", "nation", 
      "natural", "near", "necessary", "neck", "need", "needle", "nerve", 
      "net", "new", "news", "night"];

言葉は1-25することができますか？長い手紙。

私はdiv id="words"ですが、設定幅は700pxです（ただし、これは変更されることがあります）。

私はそれを作ることができるか、CSS/JavaScriptの/ jqueryのを使用する：divタグ内の単語は、左から右への順序文字の数によって言葉

プレイスは

が、そうあること単語divの右端には空白がなく、行の上に単語の間隔が均等になります。
各単語の周囲には背景と背景があります。このよう

：

|reallylongwordssdf  shorterwordfdf  dfsdfsdfsdf  sdfsdfsdf| 
|sdfsdfsdf sdffsdop sdfjpogs sdfsds dfsdsd dfsdsd dfsdsd|

私は本当にここで始めるには考えています。おそらく私は、文字数で単語を並べ替えるコードを書くことができたかもしれませんが、その後、私は立ち往生していました。

編集：私は追加することを忘れていました、単語はリンクでなければなりません。

出典

2010-12-30 bmaster

これらを表示するには固定幅フォントを使用していますか？それ以外の場合、700px以内に収まる文字数は文字によって異なります。 –

@Andrew Whitaker：私は固定幅フォントを使用していません。私は本当にしたくない（選択肢がない限り）、彼らは良く見えないので。 – bmaster

何か不足していますか？最長 - >最短で並べ替えることができますか？divにダンプしてから、テキスト整列を設定しますか？ –

上記spanタグは、ここで作業例だと、同じように<a>タグを使用します。要約http://jsfiddle.net/6nLUU/4/

：

シンプルなJSソートを使用して項目をソートします。私は任意のキーでソートしやすくするために書いた小さなライブラリを含めました。
コンテナにはtext-align:justifyを使用して、アイテムを右端に固定します。
リストの末尾に大量の空の要素を入れて、次の行に折り返します。これにより、実際の最後の行が正当化されます。
背景と罫線にCSSを使用します。

出典

2010-12-30 04:36:39 Phrogz

@Phrogz：空のラップ要素について考えたが、ハックが気に入らなかった。しかし、栄誉を1位にしています。 ;-)私に圧力をかけて、何かを実行可能にする。 –

@BradChristieこれはちょっとハッキリです。私は幾分意味論的に適切な要素（ '

'）を使用する際に控えめなものをとっています。（これはJSで生成されたコンテンツにとっては重要なことではありません）。私は、CSSにMS Wordと同様の 'text-align：full-justify'があることを願っています。 – Phrogz

@Phrogz：これはとても近いようです。しかし、最短の代わりに最長の単語をソートする必要があります。また、行を区切るのに2pxのマージンを持つことは可能でしょうか？ :) – bmaster

これはあなたの質問の一部に答えます。

プレイスdivタグ内の単語は、左から右へ、しかし単語のdivの右端にはギャップが存在しない、と偶数ライン上の単語の間の間隔が存在するようになります。

各単語の周囲には背景と背景があります。

これを行うには、各単語をにラップします。次に、各スパンがそれと次のスパンの間に同じ量のスペースを持つように、クラスマージンを設定します。スパンは、わずかな左右のパディング、境界線、背景色で設定できます。

編集あなたは言葉がリンクになりたい場合は

出典

2010-12-30 04:22:23 JakeParis

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
    .xstyle{display:block; float:left; padding-left:2px; padding-right:2px; border:1px solid black;} 
    .spacer{display:block; float:left;} 
    </style> 
</head> 
<body> 
    <div id="words" style="width:700px;height:300px;border:1px solid red"> 

    </div> 
    <script type="text/javascript"> 
     var words = ["mine", "minute", "mist", "mixed", "money", "monkey", "month", 
       "moon", "morning", "mother", "motion", "mountain", "mouth", "move", 
       "much", "muscle", "music", "nail", "name", "narrow", "nation", 
       "natural", "near", "necessary", "neck", "need", "needle", "nerve", 
       "net", "new", "news", "night", "big big big big big big big big big word"]; 

     (
      function fillWords() { 
       words.sort 
       (
        function(a, b) { 
         return b.length - a.length; 
        } 
       ); 

       if (!Array.prototype.forEach) 
        Array.prototype.forEach = function(callback, thisObj) { 
         if (typeof (callback) == 'function') { 
          for (var i = 0; i < this.length; i++) 
           callback.call(thisObj, this[i], i, this); 
         } 
        }; 

       if (!Array.prototype.some) 
        Array.prototype.some = function(callback, thisObj) { 
         if (typeof (callback) == 'function') { 
          for (var i = 0; i < this.length; i++) 
           if (callback.call(thisObj, this[i], i, this)) 
           return this[i]; 
         } 
        }; 


       var totalWidth = 0; 
       var firstIndex = 0; 
       var wBox = document.getElementById("words"); 
       var objList = []; 

       function fillSpaces(count) { 
        var space = 700 - totalWidth; 
        var eachSpace = Math.ceil(space/count) + 1; 

        objList.some 
        (
         function(sobj, i) { 
          if (i > 0) { 
           var spacer = document.createElement("div"); 
           if (totalWidth + eachSpace > 700) 
            eachSpace = 700 - totalWidth; 
           spacer.className = "spacer"; 
           spacer.style.width = eachSpace + "px"; 
           spacer.style.height = sobj.offsetHeight + "px"; 
           wBox.insertBefore(spacer, sobj); 
           totalWidth += eachSpace; 
          } 

          return totalWidth >= 700; 
         } 
        ); 

        if (totalWidth < 700) { 
         var spacer = document.createElement("span"); 
         spacer.className = "spacer"; 
         spacer.style.width = (700 - totalWidth) + "px"; 
         wBox.insertBefore(spacer, objList[objList.length - 1]); 
        } 
       } 


       words.forEach 
       (
        function(item, index) { 
         var obj = document.createElement("a"); 
         obj.href = "#"; 
         obj.className = "xstyle"; 
         obj.innerHTML = item; 
         wBox.appendChild(obj); 
         var ow = obj.offsetWidth; 
         totalWidth += ow; 
         if (totalWidth >= 700) { 
          totalWidth -= ow; 

          fillSpaces(index - firstIndex); 

          objList = [obj]; 
          totalWidth = ow; 
          firstIndex = index; 
         } else { 
          objList.push(obj); 
         } 
        } 
       ); 

       fillSpaces(words.length - firstIndex - 1); 
      } 
     )(); 
    </script> 

</body> 
</html>

出典

2010-12-30 04:49:26

努力のために+1の投票が、しかしこれにはいくつかの問題があります。最初はjqueryを使うことができるので、あなたのソリューションはjqueryソリューションよりもはるかに多くのコードを使用しています。また、言葉の間隔は時々異なっているようです。 – bmaster

このコードはmonospace'dフォントを使用していると思われます（ただし、CSSで指定する必要はありません）。 – Phrogz

注文言葉、そして私はこれと似た</em> JavaScriptの<em>内の単語のリストを持ってきちんと

答えて

注文言葉、そして私はこれと似た</em> JavaScriptの<em>内の単語のリストを持ってきちんと

答えて

関連する問題