CODEWITHSUNDEEP
cssangularjstwitter-bootstraptwitter-bootstrap-3
Connor Leech
Connor Leech

Reputation: 18834

css/bootstrap - how do i keep text from overflowing button?

I have a button group where I would like to keep the text inside the element. I don't write CSS much and would love to solve it using twitter bootstrap

My problem: enter image description here

The buttons are the right size, I'd just like to keep the text inside.

The group is generated using angularjs. I'd like the <p> text to stay inside the parent 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>

Upvotes: 0

Views: 2522

Answers (3)

Rotimi
Rotimi

Reputation: 4825

In my own case, i applied the following css to the button

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

The above css rules will keep the button responsive. Thus the text about to be "overflown" would be moved to the next line of the button.

Upvotes: 0

raj
raj

Reputation: 93

You can try using word-wrap: break-word; that will help you if you give overflow:hidden it will work but it will chop

Upvotes: 0

Rishul Matta
Rishul Matta

Reputation: 3493

use :- on your second div

style="overflow:hidden;height:30px;width:30px"

adjust height and width according to your needs the bootstrap class must be over riding the height and width

if above doesnt work try using style="clear:both"

Upvotes: 1

Related Questions