我試圖總結或調整引導按鈕裏面的文本，而不改變按鈕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