javascript - 在不打断单词的情况下向左浮动标签

Question

illustration

如果没有足够的宽度，我希望“NODEJSasdfasdfasdf”标签在下面的线上 float 。我该怎么做？

我希望这会发生:

PYTHON EXAMPLE              |
NODEJSasdfasdfasdf          |

与此相反:

PYTHON EXAMPLE NODEJSasdfasd|
fasdf                       |

或者这个:

PYTHON EXAMPLE NODEJSasdfasdfasdf
                            |

---

请注意，可能有例如。 8 个标签，因此可能是 3. 和 5. 标签需要向左向下推到下面的行上。

---

CSS

ul#mix-wrapper {
    ul {
        padding: 0;
    }

    list-style: none;
    //word-wrap: break-word;

    li {
        display: inline-block;
    }

    .card-tags ul {
        margin-block-start: 12px;
        margin-block-end: 12px;
        float: left;
    }
    .card-tags ul li {
        display: inline;
        width: fit-content;

    }
    .tag {
        background-color: #989898;
        margin: 4px;
        word-wrap: break-word;
    }
}

哈巴狗

li.mix.catC
    div test3
        .card(style='width: 18rem;')
            img.card-img-top(src='/images/pug3.jpg', alt='Card image cap')
            .card-body
                p.card-text
                    | C
                .card-tags
                    ul
                        li.tag PYTHON
                        li.tag EXAMPLE
                        li.tag NODEJSasdfasdfasdf

Answer 1

在您的 CSS 中，您可以设置最后一个 li 显示的样式以阻止内容并清除两侧 float :

.card-tags ul li:last-child {
  display: block;
  clear: both;
}

希望能解决。

在此处阅读有关 last-child 伪元素的信息: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child