bootstrap選項寬度太長

我有一個從數據庫中獲得的選項的下拉列表。正在返回的選項數據是非常長的數據串。我想最大化選項的寬度。bootstrap選項寬度太長

<span class="col-sm-4"><label>Lists:</label></span> 
<span class="col-sm-4"> 
     <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue"> 
      <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option> 
     </select> 
</span>

我用CSS片斷從另一個問題：Change width of select tag in Twitter Bootstrap

如果我改變選擇框的寬度：

.selectwidthauto { 
    width:50% !important; 
     text-overflow:ellipsis; 
     display: inline-block; 
}

然而，只有選擇容器似乎被控制（寬度）。當選項被加載時，我仍然獲得選項中的文本的全部寬度（其中包含非常長的字符串）。

如何獲得我的選項以匹配選擇的寬度（在本例中爲50％）或除全寬（自動）以外的任何大小？

只是因爲我寫的東西沒有被很好地解釋。我創建了一個小提琴，雖然不是角它描述了所發生的事情：

https://jsfiddle.net/tm1qasjg/3/

我所需要的選項值在一定的尺寸切斷文本。我不希望它顯示整個文本值。

來源

2016-05-30 webdad3

這真的是一個HTML問題，而不是真正的Bootstrap。選項元素大小可以設置，但選項元素將調整大小以適應最長的字符串。我不時自己碰到這個問題。可能的解決方案可能是使用標準選擇以外的其他方法，例如創建自己的列表選擇。你也可以有一個簡短的標籤名稱，並將完整的字符串添加到選項標籤中的標題屬性中......不確定跨瀏覽器的方式。我想我會試圖推出自己的選擇，然後字符串可以包裝在一個列表項。 – orangeh0g

@ orangeh0g - 是的，我不確定是否有bootstrap解決方案。感謝您的迴應。 – webdad3

您的代碼更改寬度有點改變！如果你會把一個完整的寬度可以用width: 100%，使用方法：

.selectwidthauto { 
 
    text-overflow:ellipsis; 
 
    display: inline; 
 
    width: 100%; 
 
}

<span class="col-sm-4"><label>Lists:</label></span> 
 
<span class="col-sm-4"> 
 
     <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue"> 
 
      <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option> 
 
     </select> 
 
</span>

酒店width: auto不等於width: 100%，width: auto是默認值。

來源

2016-05-30 15:15:52 Rebbit

感謝您的回答，但這似乎並不是我要找的。我添加了一個小提琴進一步澄清。請參閱問題中的更新。 – webdad3

bootstrap選項寬度太長

回答

相關問題