CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Aseem
Aseem

Reputation: 6779

text-wrap in navbar dropdown doesnt work through css, it works through html

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

Upvotes: 0

Views: 102

Answers (1)

justinw
justinw

Reputation: 3966

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.

Upvotes: 1

Related Questions