如何在不更改按钮大小的情况下自动包装引导按钮中的文本？
我试图总结或调整引导按钮里面的文本，而不改变按钮size.I有必须对准如何在不更改按钮大小的情况下自动包装引导按钮中的文本？
我用这个类几个按钮，文本换行，但按钮的大小增长影响与定位其他按钮
.btn-wrap-text {
white-space: normal !important;
word-wrap: break-word !important;
}
有示例代码，只是调整的观点： https://jsfiddle.net/mrapi/3yv314dx/1/
感谢
在这里，你去了一个解决方案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">
\t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <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>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
\t \t \t \t <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>
\t \t \t \t <div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
</div>
\t \t \t
\t \t \t
</div>
</div>在这里的解决方案，我用椭圆截断多余字符&以显示使用的全部文本tooltip
更长的文字仍然从按钮，调整视图大小。感谢 – mrapi
这是因为我没有添加类到其他按钮。我只添加到一个按钮.. – Shiladitya
在这里，你去解决方案https://jsfiddle.net/3yv314dx/4/ ..你需要添加'btn-wrap-text'类到所有的按钮。 – Shiladitya
您可以更改字体大小。如果你不想改变字体大小使用下面的代码
.btn-wrap-text {
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
与此代码我看不到我的case.thanks – mrapi
不知道为什么所有的复杂解决方案。
就以下内容添加到您的.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
谢谢！这个简单的解决方案完美运作 –
的古老版本的工作，你可以改变字体大小不同的视口。 –
你可以使用悬停工具提示和简化按钮文字 –
@Sami：你能给我一个示例代码。感谢 – mrapi