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不支持省略号。但是文本仍然会被切断并且不会包装。

我没有用按钮或textarea元素测试这个定义 - 只有div。但我认为没有理由不行。我留给你试验。

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

1 个答案: