省略號用於下拉框中的溢位文字

問題描述

我正在修改我的一個下拉框的寬度 (是的，我知道有這樣做的 cross-browser 問題) 。

是否有一種 non-js 方式來切斷溢位的文字並附加省略號？ text-overflow：省略號不適用於<select> 元素 (至少在 Chrome 中) 。

示例：http://jsfiddle.net/t5eUe/

最佳解決辦法

HTML 在表單控制元件中指定的內容非常有限。這為作業系統和瀏覽器製造商提供了他們認為合適的空間 (如 iPhone 的模態 select，在開啟時，與傳統的 pop-up 選單完全不同) 。

看起來大多數作業系統都切斷了所選擇的選項，而無需省略。如果您能夠更改文字的截斷方式，則看起來很奇怪，因為這不是選擇框在其餘作業系統中的工作原理。

如果它有錯誤，可以使用可自定義的替換，如 Chosen，它看起來與本機 select 不同。

或者，針對主要作業系統或瀏覽器提出錯誤。對於我們所知道的，文字在 select 中被切斷的方式可能是每個人複製的 years-old 監督的結果，可能是更改的時間。

次佳解決辦法

如果您發現這個問題，因為您的選擇框上有一個自定義箭頭，文字正在翻過箭頭，我發現一些解決方案適用於某些瀏覽器。只需在 select 的右側新增一些填充。

之前：

後：

CSS：

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

iOS 會忽略 padding 屬性，而是使用-webkit-屬性。

http://jsfiddle.net/T7ST2/4/

第三種解決辦法

最簡單的解決方案可能是限制 HTML 本身的字元數。 Rails 有一個 truncate(string, length)幫手，我確定你使用的任何一個後端都提供了類似的東西。

由於 cross-browser 問題，您已經熟悉了選擇框的寬度，這似乎是我最直接和最少的 error-prone 選項。

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

第四種辦法

你可以使用這個：

select {
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
select option {
    width:100px;
    text-overflow:ellipsis;
    overflow:hidden;
}
div {
    border-style:solid;
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

第五種辦法

quirksmode 對’text-overflow’ 屬性有很好的描述，但您可能需要應用一些其他屬性，如’white-space: nowrap’

雖然我不是 100％如何在一個選擇物件中表現，但值得先嚐試一下：

http://www.quirksmode.org/css/textoverflow.html

參考文獻

Ellipsis for overflow text in dropdown boxes

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

省略號用於下拉框中的溢位文字