javascript - 如何使边框大小相同？

Question

我正在制作一段 JavaScript，根据单词的大小将单词放入 block 中(参见下面的演示)。

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

注意:我使用“vw”单位调整边框大小，以便它们与视口(viewport)大小成比例。

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

您可以通过使用 box-shadow 和负值 margin 来实现此效果。我还在容器中添加了一些 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>