导航栏下拉菜单中的文字换行功能无法通过CSS正常运行，而可以通过html正常运行

问题描述

我在BS4导航栏中有一个下拉菜单。内容从移动设备上的容器中取出。我想通过CSS包装文字。

以下代码有效：

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

但是以下代码不起作用：

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

解决方法

我认为您正在寻找使用white-space属性，或者可能使用word-wrap或text-overflow。

我还没有听说过CSS中的text-wrap属性。