どのようにして私の罫線を同じサイズにすることができますか？

Question

サイズに応じて単語をブロックに入れてJavaScriptを作成しています（下記のデモをご覧ください）。

各単語を含むためにスパンを使用します。私の問題は、ある国では国境が本当に厚く、他の国では薄いということです。私は国境を崩壊させる方法、私がそれをどうやってできるかという考えを見つけることができないでしょうか？

注：ビューポートのサイズに比例するように、「vw」単位で罫線のサイズを設定します。

window.onload = function wordsinblocks(self) { 
 
    
 
    var demos = document.getElementsByClassName("demo"), 
 
     i = 0, len = demos.length, 
 
     demo; 
 

 
    for (; i < len; i++) { 
 
     demo = demos[i]; 
 
     var initialText = demo.textContent, 
 
      wordTags = initialText.split(" ").map(function(word) { 
 
       return '<span class="word">' + word + '</span>'; 
 
      }); 
 

 
     demo.innerHTML = wordTags.join(''); 
 
    } 
 

 
    self.disabled = true; 
 
    fitWords(); 
 
    window.addEventListener('resize', fitWords); 
 
} 
 

 
function fitWords() { 
 
    var demos = document.getElementsByClassName("demo"), 
 
     sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100], 
 
     j = 0, len = demos.length, 
 
     demo, node, 
 
     i, nodeWidth, 
 
     match, index; 
 
     
 
    for (; j < len; j++) { 
 
    
 
     demo = demos[j]; 
 
     var width = demo.offsetWidth, 
 
      calculated = sizes.map(function(size) { 
 
       return width * size/100 
 
      }); 
 

 
     for (i = 0; i < demo.childNodes.length; i++) { 
 
      node = demo.childNodes[i]; 
 
      node.classList.remove('size-1', 'size-2', 'size-3', 'size-4'); 
 

 
      nodeWidth = node.clientWidth; 
 
      match = calculated.filter(function(grid) { 
 
       return grid >= nodeWidth; 
 
      })[0]; 
 
      index = calculated.indexOf(match); 
 
      
 
      node.classList.add('size-' + (index + 1)); 
 
     } 
 
    } 
 
}

.demo { 
 
    display: block; 
 
    padding: 0 0 0 1px; 
 
    overflow: auto; 
 
} 
 

 
.demo .word { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-size: 2.9vw; 
 
    height: 10%; 
 
    font-family: "helvetica"; 
 
    border: 1vw solid black; 
 
} 
 

 
.demo .word:hover { 
 
    background-color: blue; 
 
    color: white; 
 
} 
 

 
.demo .size-1 { 
 
    width: 7.69230769230769%; 
 
} 
 

 
.demo .size-2 { 
 
    width: 23.07692307692307%; 
 
} 
 

 
.demo .size-3 { 
 
    width: 46.15384615384614%; 
 
} 
 

 
.demo .size-4 { 
 
    width: 100% 
 
}

<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>

Answer 1

あなたは負marginと一緒にbox-shadowを使用して、この効果を達成することができます。私はまた、エッジがクリップされないようにいくつかpaddingをコンテナに追加しました。結果の

スクリーンショット：は

ライブデモ：

window.onload = function wordsinblocks(self) { 
 
    
 
    var demos = document.getElementsByClassName("demo"), 
 
     i = 0, len = demos.length, 
 
     demo; 
 

 
    for (; i < len; i++) { 
 
     demo = demos[i]; 
 
     var initialText = demo.textContent, 
 
      wordTags = initialText.split(" ").map(function(word) { 
 
       return '<span class="word">' + word + '</span>'; 
 
      }); 
 

 
     demo.innerHTML = wordTags.join(''); 
 
    } 
 

 
    self.disabled = true; 
 
    fitWords(); 
 
    window.addEventListener('resize', fitWords); 
 
} 
 

 
function fitWords() { 
 
    var demos = document.getElementsByClassName("demo"), 
 
     sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100], 
 
     j = 0, len = demos.length, 
 
     demo, node, 
 
     i, nodeWidth, 
 
     match, index; 
 
     
 
    for (; j < len; j++) { 
 
    
 
     demo = demos[j]; 
 
     var width = demo.offsetWidth, 
 
      calculated = sizes.map(function(size) { 
 
       return width * size/100 
 
      }); 
 

 
     for (i = 0; i < demo.childNodes.length; i++) { 
 
      node = demo.childNodes[i]; 
 
      node.classList.remove('size-1', 'size-2', 'size-3', 'size-4'); 
 

 
      nodeWidth = node.clientWidth; 
 
      match = calculated.filter(function(grid) { 
 
       return grid >= nodeWidth; 
 
      })[0]; 
 
      index = calculated.indexOf(match); 
 
      
 
      node.classList.add('size-' + (index + 1)); 
 
     } 
 
    } 
 
}

.demo { 
 
    display: block; 
 
    padding: 1vw; 
 
    overflow: auto; 
 
} 
 

 
.demo .word { 
 
    float: left; 
 
    padding: 5px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    font-size: 2.9vw; 
 
    height: 10%; 
 
    font-family: "helvetica"; 
 
    box-shadow: 0 0 0 1vw black; 
 
    margin: 0.5vw; 
 
} 
 

 
.demo .word:hover { 
 
    background-color: blue; 
 
    color: white; 
 
} 
 

 
.demo .size-1 { 
 
    width: 7.69230769230769%; 
 
} 
 

 
.demo .size-2 { 
 
    width: 23.07692307692307%; 
 
} 
 

 
.demo .size-3 { 
 
    width: 46.15384615384614%; 
 
} 
 

 
.demo .size-4 { 
 
    width: 100% 
 
}

<p class="demo">Guy Debord est un écrivain, essayiste, cinéaste, poète1 et révolutionnaire français. Il se considère avant tout comme un stratège. C'est lui qui a conceptualisé la notion sociopolitique de « spectacle », développée dans son œuvre la plus connue, La Société du spectacle.</p>

Answer 2

境界はすべて同じであるそれだけでトンです帽子は言葉の間に隙間がないので、国境は「倍増する」。マージンを追加してみてください：1px to .word