Как разбить строку в URL с помощью CSS

Question

Доброе утро,

У меня есть меню с несколькими опциями. Я хочу отобразить изображение и рядом с ним строку, гиперссылку меню. Например:

<ul>
    <li class="category" id="category-19">
        <a class="dropdown-item" href="http://localhost/new.domain/test-test" data-depth="0">
            ::before
            Test Test
        </a>
    </li>
</ul>

И мой CSS:

#header .menu, #header .menu > ul > li {
    display: inline-block;
}
ul {
    list-style: none;
}
#_desktop_top_menu a {
    text-transform: uppercase;
}
.top-menu a[data-depth="0"] {
    font-weight: 600;
    padding: .1875rem .625rem .375rem;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 400;
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
}

Хочу что-то подобное:

Как получить этот эффект? спасибо за любую помощь.

Answer 1

Вы можете принудительно переносить, задавая фиксированный размер и используя перенос слов:

.dropdown-item { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

Answer 2

Вы можете использовать тег <pre> перед тестированием и закрыть его.

Тег определяет форматированный текст.