如何<a>使用 CSS</a>在 html 標簽內創建換行符<a>？</a>

Question

我想知道如何使用 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””）。

所以，我的問題是：

1. 如何在 html 標簽<a>內創建換行符以使標簽的所有內容（包含在標簽<a> ）出現？
2. 如果可能，如何使用 CSS 實現？

Answer 1

您可以使用<br>標簽，它正在工作。

Answer 2

正如您所發現的，Bootstrap 向dropdown-menu a標簽添加了white-space: nowrap 。

您可以通過添加此樣式來覆蓋它：

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

小提琴