Question

我在DIV中有两个按钮。 DIV有宽度限制，但我希望按钮不符合此限制。我准备了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;
}

这个想法是按钮出现在同一行而没有任何剪辑。怎么做？

Answer 1

如果这符合您的需求，请不要提起诉讼，但一个选项是<button>包裹<div>并提供white-space: nowrap声明。

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>

如何避免在CSS中剪辑？

1 个答案: