我想知道如何在html标签内用CSS做一个新行。解释如下。
这是我的HTML代码。
<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>
这是CSS代码(属于菜单)。
#mess_menu{
overflow: scroll;
overflow-x: hidden;
height: 360px;
width: 400px;
}
这是我在屏幕上得到的截图。
如果我改变上面的HTML代码,加入了标签。<a>
如下(注意我把 <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>
我的屏幕上会出现如下菜单。
从上面的截图中你可以看到,菜单的内容是: <li>
改变了,而且没有显示全部文字(只显示 "表中的数字指定第一个br")。
所以,我的问题是
<a>
以使标签的所有内容(包含在标签的 <a>
)出现?你可以用 <br>
标签,并且它正在工作。
正如你所发现的,Bootstrap增加了 white-space: nowrap
到 a
标签 dropdown-menu
.
你可以通过添加这个样式来覆盖它。
.dropdown-menu > li > a {
white-space: normal;
}