Question

如果宽度不够，我希望“ NODEJSasdfasdfasdf”标签向下浮动。我该怎么办？

我希望这会发生：

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

pug

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显示器的样式，以阻止内容并清除两侧浮动，例如：

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

希望它能解决它。

在这里阅读有关最后一个子元素的伪元素： https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

浮动标签向左向下，但没有断字

1 个答案: