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

Question

可以说我有一个Label，Button或TextArea对象，其中包含一些文本。 默认情况下，工作方式是将这些对象中的文本自动自动换行到下一行。 有没有办法禁用此功能？ 我知道CSS属性

overflow : hidden ;

将停止滚动条的显示。 但是，有没有一种方法可以阻止文本进入下一行？

我希望情况是这样的：如果我的字符串比放置在其中的对象“宽”，它将简单地将字符串写成对象可以容纳的限制，而不必将其包装到下一行？ 有人有办法吗？

谢谢。

Answer 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不支持省略号。 但是文本仍然会被截断并且不会自动换行。

我还没有使用button或textarea元素测试此定义-仅使用divs。 但我认为没有理由不起作用。 我把它留给你去试验。