如何將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。 但我認為沒有理由不起作用。 我把它留給你去試驗。