How to make a newline inside the html tag <a> with CSS?

Question

I would like to know how to make a newline inside the html tag with CSS. The explanation is as below:

This is the code HTML that I have:

<ul class="dropdown-menu pull-right" id="mess_menu" role="menu"><li style="border-bottom: 1px #D3D3D3;border-bottom-style: solid;"><span style="display:block; width: 200px">The numbers in the table specify the first browser version that fully supports the property.The numbers in the table specify the first browser version that fully supports the property.</span></li></ul>

This is the code CSS (it belongs to the menu):

#mess_menu{
  overflow: scroll;
  overflow-x: hidden;
  height: 360px;
  width: 400px;              
}

And this is the screenshot what I obtain on the screen:

If I change the code HTML above by adding the tag <a> as below (notice that I put <a href="" style="display:block;"> ) :

<ul class="dropdown-menu pull-right" id="mess_menu" role="menu"><li style="border-bottom: 1px #D3D3D3;border-bottom-style: solid;"><a href="" style="display:block;"><span style="display:block; width: 200px">The numbers in the table specify the first browser version that fully supports the property.The numbers in the table specify the first browser version that fully supports the property.</span></a></li></ul>

The menu will appear on my screen as below:

As you can notice from the screenshot above, the content of the <li> has changed and the totality of the text is not shown (only "The numbers in the table specify the first br" is shown").

So, my questions are:

1. How to make a newline inside the html tag <a> in order to make all the content of the tag (which is contained inside the tag <a> ) appear?
2. If it is possible, how to make it with CSS?

Answer 1

您可以使用<br>标签，它正在工作。

Answer 2

As you discovered, Bootstrap adds white-space: nowrap to a tags within a dropdown-menu .

You can override that by adding this style:

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

Fiddle