javascript - 如何将Label，Button或TextArea保持为一行？

假设我有一个Label、Button或TextArea对象，它包含一些文本。默认情况下，这些对象中的文本将自动换行到下一行。有没有办法让它失效？我知道CSS属性

overflow : hidden ;

将阻止滚动条显示。但有没有办法阻止文本转到下一行？
我希望是这样的情况，如果我有一个字符串比它所在的对象“宽”，它将简单地写出字符串到对象可以包含的限制，而不将它包装到下一行？有人有办法吗？
谢谢您。

最佳答案

您可以使用以下css定义来实现此目的：

<style type="text/css">

.element {
        width:200px;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
}

</style>

<div class="element">
This text will not wrap.  Hamina hamina hamina hamina hamina.
</div>

这将防止任何文本换行到下一行。如果文本超过元素的宽度，它将被截断。如果您使用的是webkit/explorer，您将得到一个漂亮的省略号效果，其中的文本会被切断（建议有更多的文本比可见的）。
不幸的是，firefox不支持省略号。但文本仍将被截断，不会换行。
我还没有用button或textarea元素测试过这个定义——只有div。但我认为没有理由不起作用。我让你来做实验。