動態擴展選擇選項背景

問題：正如你可以在圖片中看到，該背景所選擇的選項不會擴大爲選項文本的寬度，並用白色背景..它會不顯示剩餘的文字，我該如何解決這個問題？我使用的是Chrome瀏覽器，但我也希望在Firefox和IE瀏覽器中使用它。動態擴展選擇選項背景

enter image description here

HTML：

<select multiple="" class="h-scrollable form-control"> 
       <option ng-repeat="elem in list"> 
        {{elem}}</option> 
      </select>

CSS：

.h-scrollable 
{ 
    width: 350px; 
    height: 150px !important; 
    overflow: auto; 
    margin-right:20px; 
    font-size: medium; 
} 
.h-scrollable:focus 
{ 
    height: 150px !important; 
    overflow: auto; 
    margin-right:20px; 
    font-size: medium; 
    background-size: 100%; 
    background: pink; 
} 
.h-scrollable option 
{ 
    /*width: 350px; */ 
} 
.h-scrollable option:checked 
{ 
    /*width: 400px; THIS FIXES THE PROBLEM FOR A TEXT OF WIDTH = 350px; I want a general solution that will work for any length of text*/ 
}

來源

2014-12-02 AlexandruC

你能澄清你在做什麼嗎？這裏是你的代碼小提琴：http://jsfiddle.net/n3g0gb97/ – Askanison4 2014-12-02 15:58:14

CSS和動態不一定混合得很好。不完全確定你想要做什麼 – ntgCleaner 2014-12-02 16:00:11

在問題中發佈你生成的標記，而不是角碼。 – Abhitalks 2014-12-02 16:03:11

把選擇內部的一個div，刪除寬度上的選擇/選項，並添加一個寬度和溢出：汽車的股利。 http://jsfiddle.net/g52qmz32/

<div style="width: 240px; overflow: auto;"> 
    <select multiple="" class="h-scrollable form-control"> 
    <option>one option</option> 
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option> 
    <option>another option</option> 
    <option>last option is really very long one</option> 
    </select> 
</div>

這可能需要一些修改，以自己的喜好，但我相信這是你追求的。

**編輯：如果內容寬度不超過240像素，我刪除了右邊距以消除滾動條。還爲.h-scrollable類添加了最小寬度。這是你在找什麼？

來源

2014-12-02 17:23:47 deebs

真棒的主意！謝謝 – AlexandruC 2014-12-02 20:02:38

使用CSS做text-overflow，讓文本自動截斷，而不需要滾動條。

這取決於設計師的判斷，但我個人認爲兩次，然後第三次要求用戶在select字段內滾動。

見你撥弄此更新爲例：http://jsfiddle.net/7dkhgLrv/6/

UPDATE：還，添加overflow: auto;到.h-scrollable類最佳效果。

來源

2014-12-02 17:02:39 Askanison4

動態擴展選擇選項背景

回答

相關問題