選擇下拉列表將關閉多個選項值

我只使用HTML和CSS和Bootstrap。我在選項中有很長的值，但我希望它們會顯示在s col-md-6選擇框中。但是選擇框正在以正確的方式出現，但數值正在屏幕之外。也適用於臺式機和平板電腦選擇下拉列表將關閉多個選項值

我搜索了很多，但沒有得到適當的解決方案。

這是我的代碼：

<html> 
<head> 
    <style> 
    select { 
     width: 400px; 
     font-size: xx-large; 
    } 

    option { 
     font-size: xx-large; 
     padding: .5em; 
    } 
    </style> 

    <title></title> 
</head> 

<body> 
    <form> 
<div class="row"> 
<div class="col-md-6"> 
    <label for="id_foo">Foo:</label> 
    <select name="foo" id="id_foo" style="width:100%"> 
     <option>1dfdsfsdfdsfdfdsfdfdsfddgfgghghghghjhgjhgghkhjkhgkjkeretryw4562456fhgfh</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     <option>9</option> 
    </select><br /> 
</div> 
</div> 

    <input type="submit" value="Submit" name="submit" id="submit" /> 
    </form> 
</body> 
</html>

來源

2017-04-11 Nikita S

您可以添加css屬性來顯示溢出時的省略號。您也可以查看文字換行，但由於您的選項文本爲1個單詞，因此無法使用。你可以使用它作爲參考：https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – Rajesh

在桌面上運行良好，但我希望它能響應平板電腦和桌面。 –

它也不適用於長句。 –

我找到了答案。

它的Bootstrap Col-md-x類問題。從我的起始容器中，我錯過了一些課堂價值觀。現在我重新安排了他們的到來，正是我想要的。謝謝Rajesh。

來源

2017-04-19 06:27:55

選擇下拉列表將關閉多個選項值

回答

相關問題