Css How To Wrap Text In Li

I'm trying to wrap my text in my slide menu. I have ul max-width 200px, but when I write longer text, then my text is not visible ( now i added overflow: visible to show You what I

Solution 1:

You can use word-wrap: break-word; on li. check updated snippet below..

.dropdown-menuli, .dropdown-menulia {
    white-space: normal;
    float: left;
    width: 100%;
    height: auto;
    word-wrap: break-word;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><navclass="navbar navbar-default"role="navigation"><divclass="dropdown"><buttonclass="btn btn-default dropdown-toggle"type="button"id="dropdownMenu1"data-toggle="dropdown">
        Dropdown
        <spanclass="caret"></span></button><ulclass="dropdown-menu"style="max-width: 200px"role="menu"aria-labelledby="dropdownMenu1"><lirole="presentation"class="dropdown-header">Dropdown header trying to write something</li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Action</a></li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Another action</a></li><lirole="presentation"class="disabled"><arole="menuitem"tabindex="-1"href="#">Something else here</a></li><lirole="presentation"class="divider"></li><lirole="presentation"class="dropdown-header">Dropdown header</li><lirole="presentation"><arole="menuitem"tabindex="-1"href="#">Separated link</a></li></ul></div></nav>

Solution 2:

Try this:

.dropdown-header {
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal !important;
}

Solution 3:

Please try with this code

.dropdown-menuli, .dropdown-menulia {
    word-break: break-word;
    white-space: normal;
}