CODEWITHSUNDEEP
htmlcss
Ivan
Ivan

Reputation: 15912

How to avoid clipping in CSS?

I have two buttons inside a DIV. The DIV has a width limit but I want that the buttons don't respect this limit. I've prepared a jsfiddle with this:

<div>
    Some text, this text must be clipped, but not the buttons
    <button>This is a long text</button>
    <button>This is another long text</button>
</div>

div {
    width: 100px;
    border: 1px solid blue;
}

The idea is that the buttons appear in the same row without any clipping. How to do this?

Upvotes: 0

Views: 917

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99474

Not sue if this meet your needs but one option would be to wrap the <button>s by a <div> and give that white-space: nowrap declaration.

body > div {
    width: 100px;
    border: 1px solid blue;
}

div > div { /* you should use a more specific selector instead */
    white-space: nowrap;
}
<div>
    Some text, this text must be clipped, but not the buttons
    <div>
        <button>This is a long text</button>
        <button>This is another long text</button>        
    </div>
</div>

Upvotes: 2

Related Questions