如何使我的边框尺寸相同？

Question

我制作了一段JavaScript，根据文件的大小将文字放在块中（参见下面的演示）。

我使用跨度来包含每个单词。我的问题是边界在某些地方非常厚，在其他地方很薄。我似乎无法找到如何让边界崩溃，以及如何做到这一点的任何想法？

注意：我使用＆＃34; vw＆＃34;来调整边框的大小。单位，以使它们与视口大小成比例。

＆＃13;

＆＃13;

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));
        }
    }
}

＆＃13;

.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%
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用box-shadow和否定margin来完成此效果。我还在容器中添加了一些padding，因此边缘不会被剪裁。

结果的屏幕截图：

现场演示：

＆＃13;

＆＃13;

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));
        }
    }
}

＆＃13;

.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%
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

边框都是一样的，只是单词之间没有间隙，所以边框“加倍”。尝试添加保证金：1px到.word