如何在不更改按钮大小的情况下将文本包装在引导按钮内？答案

【问题标题】：How to wrap text inside bootstrap button without changing button size?如何在不更改按钮大小的情况下将文本包装在引导按钮内？
【发布时间】：2018-01-17 08:46:03
【问题描述】：

我正在尝试在引导按钮内换行或调整文本大小而不更改按钮大小。我有几个按钮必须对齐

我用过这个类，文本是换行的，但是按钮的尺寸变大了，影响了与其他按钮的对齐

 .btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}

有示例代码，只需调整视图大小： https://jsfiddle.net/mrapi/3yv314dx/1/

谢谢

【问题讨论】：

您可以更改不同视口的字体大小。
您可以使用悬停工具提示并简化按钮文本
@Sami: 你能给我一个示例代码吗。谢谢
我要求您使用像 @media (max-width: 1024px) {.btn-wrap-text {font-size: 12px;}} 这样的媒体查询。（这适用于平板电脑）

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

不知道为什么所有复杂的解决方案。

只需将以下内容添加到您的.btn css：

white-space: normal;

所以，如果您的全局 css 文件中已有 .btn，请执行以下操作：

.btn {
    white-space: normal;
}

或者如果你的全局 css 文件中没有任何内容，只需内联，例如：

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

注意：此方法可能不适用于旧版 IE

【讨论】：

它改变了高度
@MacGyver - 文本换行会导致按钮高度发生变化（如果您有固定宽度的按钮）。尝试防止这种情况的好选择是将@media字体大小减小与此方法结合使用。
感谢您的建议！

【解决方案2】：

这里有一个解决方案https://jsfiddle.net/3yv314dx/3/

$('[data-toggle="tooltip"]').tooltip();

.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-wrap-text {
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
    <div class="col-sm-6">
    	        <div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                       ARTICLE                  
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                         ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                         ARTICLE       
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE               
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                       ARTICLE             
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4"> 
                    <button class="btn btn-success btn-sm btn-block btn-outline btn-wrap-text" data-toggle="tooltip" title="ARTICLE WITH LONGER NAME">
                       ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                         
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
               <div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
            </div>
			
			
           </div>  
  </div>

在解决方案中，我使用椭圆来截断多余的字符并显示使用的整个文本tooltip

【讨论】：

较长的文本仍会从按钮中输出，请调整视图大小。谢谢
那是因为我没有为其他按钮添加类。我只添加了一个按钮..
这里有一个解决方案jsfiddle.net/3yv314dx/4 .. 你需要将btn-wrap-text 类添加到所有按钮。
我是一个解决方案。谢谢，但我想看看文字。是不是不影响按钮就可以换行了？
@mrapi... 不截断或不影响按钮大小是不可能的。

【解决方案3】：

您可以更改字体大小。如果您不想更改字体大小，请使用以下代码

.btn-wrap-text {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
}

【讨论】：