按钮溢出隐藏不起作用 [英] Button overflow hidden not working

问题描述

我有以下内容:

小提琴链接

html:

<button>Here's a long chunk of text</button>

css:

button {
   width: 80px;
   overflow: hidden;
}

基本上，我希望按钮不包含文字.

Basically, I want the button not to wrap the text..

我确定我只是缺少明显的东西，但我无法弄清楚...

I'm sure I'm just missing something obvious, but I can't figure it out...

推荐答案

添加以下样式以防止换行:

Add the following style to prevent line breaks:

{
    white-space: nowrap;
}

> 更新的小提琴

编辑

现在，由于您正试图隐藏溢出，我建议使用 text-overflow:省略号; 来使文本剪切效果更好，并添加一个(...)最后:

Now, since you're trying to hide the overflow, I'd suggest to use text-overflow: ellipsis; to give better looks to the text cut, adding a (...) at the end:

另一个更新过的小提琴

button {
    width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<button>Here's a long chunk of text</button>

这篇关于按钮溢出隐藏不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！