如何在html标签内用CSS做一个新行?

问题描述 投票:1回答:3

我想知道如何在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;              
}

这是我在屏幕上得到的截图。

enter image description here

如果我改变上面的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>

我的屏幕上会出现如下菜单。

enter image description here

从上面的截图中你可以看到,菜单的内容是: <li> 改变了,而且没有显示全部文字(只显示 "表中的数字指定第一个br")。

所以,我的问题是

  1. 如何在html标签中加入新行?<a> 以使标签的所有内容(包含在标签的 <a>)出现?
  2. 如果可以,如何用CSS制作?
html css menu html-lists newline
3个回答
1
投票

你可以用 <br> 标签,并且它正在工作。


0
投票

正如你所发现的,Bootstrap增加了 white-space: nowrapa 标签 dropdown-menu.

你可以通过添加这个样式来覆盖它。

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

Fiddle

© www.soinside.com 2019 - 2024. All rights reserved.