плавать тег вниз влево, не нарушая слова

Question

illustration

Мне бы хотелось, чтобы тег "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;
}

Надеюсь, это поможет.

Прочитайте о last-childпсевдоэлемент здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child