如何将标签、按钮或文本区域保持为一行？

【问题标题】：How do I keep a Label, Button, or TextArea as a single line?如何将标签、按钮或文本区域保持为一行？
【发布时间】：2010-02-22 06:20:27
【问题描述】：

假设我有一个标签、按钮或 TextArea 对象，其中包含一定数量的文本。默认情况下，这些对象中的文本会自动换行到下一行。有没有办法禁用它？我知道 CSS 属性

overflow : hidden ;

将停止显示滚动条。但是有没有办法阻止文本进入下一行？

我希望这样的情况是，如果我有一个比它所在的对象“更宽”的字符串，它会简单地将字符串写出到对象可以包含的范围内，而不会将其包装到下一行？有人有办法做到这一点吗？

谢谢。

【问题讨论】：

标签： javascript html css gwt

【解决方案1】：

您可以使用以下 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 不支持省略号。但是文字还是会被截断，不会换行。

我没有用按钮或文本区域元素测试过这个定义——只用 div。但我认为没有理由它不应该工作。我把它留给你去试验。

【讨论】：