导航栏下拉列表中的文本换行在 css 中不起作用，它在 html 中起作用

Question

I have a dropdown in BS4 navbar. The content goes out of the container on mobile device. I want to wrap the text through css.

Following code works:

HTML:

<div class="dropdown-menu" >
    {% for department in object.departments.all %}
        <a class="dropdown-item text-wrap" href="">
            {{ department.name }}</a>
    {% endfor %}
</div>

CSS:

.dropdown-menu {
  width: 30vw;
}

But following code doesnt work:

HTML:

<div class="dropdown-menu" >
    {% for department in object.departments.all %}
        <a class="dropdown-item" href="">
            {{ department.name }}</a>
    {% endfor %}
</div>

CSS:

.dropdown-menu {
  width: 30vw;
}
.dropdown-item{
  text-wrap:normal;
}

Answer 1

I think you are looking to use the white-space property or possibly to use word-wrap or text-overflow .

I've not heard of the text-wrap property in css.