Wrapping a word using CSS after n number characters or pixels

Question

I am using this link. http://lodev09.github.io/bootstrap-suggest/

On this page, when you start typing with @ characters in the first textbox, system shows a dropdown with certain values. I want to ensure, after every 20 characters system should wrap the text in the next line.

I tried adding following style to <li> tag but it did not helped.

word-wrap:break-word;
max-width:30px;

Answer 1

I would use something like:

li { 
     word-wrap: break-word; 
     max-width: 20ch;
}

It doesn't break the word at 20 characters but rather wraps the text when it hits the 20 character limit.

Answer 2

adding this class helped:

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