Bootstrap 按钮上的自动换行不起作用答案

【问题标题】：Wordwrap on Bootstrap button does not workBootstrap 按钮上的自动换行不起作用
【发布时间】：2020-01-24 12:30:27
【问题描述】：

我在一个简单的页面上有一个引导布局，只是在全屏上排列了一些列的行，没有设置 with 或 hight，应该保持这种方式。

这是我的布局定义

<div class="container-fluid">
    <div class="row">
        <div class="section col-lg">
            <ul class="list-group>

在 ul 里面我有一个这样的按钮

<a type="button" class="btn btn-success list-group-item list-group-item-warning"
    href="https://www.google.at" target="_blank">
    <i class="material-icons">extension</i>
    <br>
    asdfasdfasdfasd fasdfasdfasdfasdfasdf
</a>

但现在的问题是按钮文本溢出并且没有包裹在按钮内。

我已经尝试了Force a line break inside the button's text when using small screens 的解决方案，但这也没有做任何事情，只是剪切了按钮文本而不是将其包装到下一行

我也试过overflow : hidden;，但这也只是在溢出之前隐藏了文本

【问题讨论】：

能否请您分享您的 css 以了解更多信息？
我的 css 不包含任何 atm。我从引导程序加载所有内容。
我使用了你的相同代码并重复你的 col-lg 五次。它完美地工作。在此处显示 SS：prnt.sc/pab8k3
Force a line break inside the button's text when using small screens的可能重复
Bootstrap: "list-group-item list-group-item-warning" 这些类有什么用，它们是单独包含颜色属性还是包含其他属性？

标签： html css bootstrap-4

【解决方案1】：

通过为较小的屏幕添加此@media 查询 CSS，您可以使按钮文本在按钮语句中的间隙上拆分多次以适合按钮内部：

CSS

@media only screen and (max-width: 30em) {

   body .btn { white-space: normal; }

}

正如您在这张图片中看到的，这将覆盖所有查看设备，宽度为 232 像素，远低于编码最小媒体查询的标准宽度：

即使你想在这个标准宽度以下编写代码，CSS sn-p 仍然可以工作。这是一个几乎荒谬的 186 像素宽度的结果，只需再次拆分问题中的文本即可。您可以通过在 BS4 上添加 Bootstrap 推荐的 <small></small> 用法来使文本更小 .btn text >>> https://getbootstrap.com/docs/4.0/content/typography/#inline-text-elements

我还在下面的 Stack Overflow 代码 sn-p 中添加了 CSS，作为其功能可行性的证据，但我应该注意（如您所知）这不是我自己的代码。我从这里的另一个 Stack Overflow 问题中得到它 >>> Force a line break inside the button's text when using small screens

我希望它有助于解决您的问题。

@media only screen and (max-width: 30em) {
  body .btn { white-space: normal; }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
	<style>


    </style>
  </head>
  
  <body>
  
	  <div class="container-fluid">
		<div class="row">
			<div class="section col-lg">
				<a type="button" class="btn btn-success list-group-item list-group-item-warning"
					href="https://www.google.at" target="_blank">
					<i class="material-icons">extension</i>
					<br>
					asdfasdfasdfasd fasdfasdfasdfasdfasdf
				</a>
			</div>
		</div>
	  </div>


	
	<!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
  </body>
</html>

【讨论】：

是的，我已经理解了 @media 的功能，但它在某种程度上不适用于我的代码，即使我的 css 中有查询，它仍然会溢出它不以某种方式吸引我的 html
我并不是说你不明白 _ 通过这个答案，我们只是确定推荐的 CSS 确实有效_ 根本不在你的页面上 _ 也许发布所有内容是个好主意“简单页面”站点上的代码_以便我们可以尝试确定可能存在的差异_它们可能不在您的实际代码中，而是在 Bootstrap 或 jQuery 或其他一些原因的版本中_如果您愿意花时间发布所有代码，然后我很乐意在本地测试它
这个解决方案效果很好。似乎这是与 InternetExplorer10 相关的问题。在 Chrome 和 Firefox 中完美运行

【解决方案2】：

尝试使用 p 标签：

<a type="button" class="btn btn-success list-group-item list-group-item-warning"
    href="https://www.google.at" target="_blank">
    <i class="material-icons">extension</i>
    <br>
    <p>asdfasdfasdfasd fasdfasdfasdfasdfasdf</p>
</a>

【讨论】：

没有改变任何东西

【解决方案3】：

尝试在标签中使用 class= "d-inline-block text-truncate"

【讨论】：

也没有变化。
如果我在按钮本身上更改它，它可以工作，但它会切断它，我希望它进入下一行，这样我仍然可以看到整个文本。这个解决方案也是我在课堂上使用overflow: hidden; 实现的