如何使用 CSS 在 html 标签 <a> 内创建换行符？答案

【问题标题】：How to make a newline inside the html tag <a> with CSS?如何使用 CSS 在 html 标签 <a> 内创建换行符？
【发布时间】：2015-01-12 11:04:54
【问题描述】：

我想知道如何使用 CSS 在 html 标记内创建换行符。解释如下：

这是我拥有的代码 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;              
}

这是我在屏幕上获得的屏幕截图：

如果我通过添加标签<a> 来更改上面的代码HTML，如下所示（注意我输入了<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”）。

所以，我的问题是：

如何在html标签<a>内换行，以使标签的所有内容（包含在标签<a>内）都出现？
如果可以的话，如何用 CSS 实现？

【问题讨论】：

给a一个display: inline-block。
Html Anchor text formatting的可能重复
我确实为标签<a>添加了display: inline-block，但它没有用！
不仅如此。检查副本。
好吧，我在<a> 中没有任何  标签，我只有，这是它的代码：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.

标签： html css menu html-lists newline

【解决方案1】：

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

【讨论】：

我无法在 中插入 ，因为这取决于 的内容。

【解决方案2】：

如您所见，Bootstrap 在dropdown-menu 中将white-space: nowrap 添加到a 标记。

您可以通过添加此样式来覆盖它：

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

Fiddle

【讨论】：