CODEWITHSUNDEEP
javascriptjqueryhtml
Suraj
Suraj

Reputation: 2563

break the dropdown text length to next line

I want the length of my dropdown text to come to the next line after certain width.

I tried white-space:normal; but that isn't working.

<div class="dropdown">
  <a class="dropdown-toggle" id="dropdownMenu1" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else heresssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Here is the fiddle.

UPDATE : It's been fixed. Was missing word-wrap: break-word;

Thanks for quick responses everyone.

Upvotes: 2

Views: 13037

Answers (7)

dreamweiver
dreamweiver

Reputation: 6002

The reason white-space-normal or word-break: break-word; is not working for you is because by default bootstrap css library is applying following css property to the anchor tag.

dropdown-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap;display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap; // this is the culprit
}

So the last line white-space: nowrap; is what is preventing the you from breaking the line, since thats taking priority.

My Solution:

  • Overriding the white-space css property with specificity !important.
  • Also adding word-break: break-word; property to the anchor tag, so that the text will be better formatted.

Live Demo @ JSFiddle:http://jsfiddle.net/n7r4mjf2/8/

Upvotes: 1

akash
akash

Reputation: 2157

.dropdown-menu>li>a {
    word-wrap: break-word;
    white-space: normal;
}

.dropdown-menu{
    max-width: 200px;
}

Fiddle Demo

Upvotes: 3

Tushar
Tushar

Reputation: 616

Use following css:

.dropdown ul{width: 250px; word-wrap: break-word;} 

.dropdown li a {white-space: normal !important;}

fiddle

Upvotes: 2

Aru
Aru

Reputation: 1870

just update your css with the below

CSS

.dropdown-menu {
    width: 200px;
}
.dropdown-menu > li > a {
    word-break: break-all;
    white-space:normal;
}

Fiddle Demo

Upvotes: 2

Anshul
Anshul

Reputation: 9480

Do it : 

.dropdown-menu>li>a {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.dropdown-menu{
  //give some width
}

Upvotes: 2

AlexG
AlexG

Reputation: 5929

Simple as that, just keep an eye on the longest word, otherwise they overflow the container

.dropdown-menu{
    max-width: 200px;
}

.dropdown-menu > li > a{
    white-space: normal;
}

Upvotes: 2

lshettyl
lshettyl

Reputation: 8181

Use the following CSS:

.dropdown-menu > li > a {
    word-wrap: break-word;
    width: 200px; /* change accordingly */
    white-space: normal;
}

Updated fiddle

Upvotes: 3

Related Questions