css / bootstrap - 如何保持文本不溢出按钮？

Question

我有一个按钮组，我希望将文本保留在元素中。我不会写很多CSS，并且很乐意使用twitter bootstrap来解决它

我的问题：

按钮大小合适，我只想将文字保留在里面。

使用angularjs生成组。我希望<p>文本留在父div

中

<div class="btn-group-vertical col-md-3">
    <div class='btn btn-default' ng-repeat="(route_id, route) in routes">
        <h2>{{route.short_name}}</h2>
        <p>{{ route.description }}</p>
    </div>
</div>

Answer 1

使用： - 在你的第二个div上

风格= “溢出：隐藏;高度：30像素;宽度：30像素”

根据您的需要调整高度和宽度，bootstrap类必须超过高度和宽度

如果以上不起作用，请尝试使用style =“clear：both”

Answer 2

你可以尝试使用word-wrap: break-word;来帮助你，如果你overflow:hidden它会起作用但是它会被砍掉

Answer 3

在我自己的情况下，我将以下CSS应用于按钮

style='display: table;white-space: pre-line;word-break: break-all;'

以上css规则将使按钮保持响应状态。因此，将要“溢出”的文本将移动到按钮的下一行。