bootstrap select 設置最大寬度後被切掉

html css bootstrap

jasper0047 2022-08-04 14:55:07 ‧ 1849 瀏覽

分享至

為了不讓選項表單超出範圍，我設置了最大寬度，不過當我選擇一個選項時，文字內容(選項表單內的)會依照目前寬度，切掉多餘的文字，而沒被選擇的選項則是正常，請教各位大神，如何不要讓文字被切掉，感謝！

.dropdown-menu{ max-width:100%;}

    <select class="selectpicker"  data-width="100%" data-container="body" data-live-search="true" data-size="6" >
        <option title="test">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestsaaaaaaaaaaaaaaaaa</option>
        <option title="test">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestsaaaaaaaaaaaaaaaaa</option>
        <option title="test">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestsaaaaaaaaaaaaaaaaa</option>
        <option title="test">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestsaaaaaaaaaaaaaaaaa</option>
    </select>

只有被選擇的時候，才會被切掉內容

bootstrap-select

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

river_huang

iT邦新手 3 級 ‧ 2022-08-05 13:08:30

最佳解答

試試加上這段css

.dropdown-menu .dropdown-item.active.selected {
  display: table;
}

https://codesandbox.io/s/serene-silence-i54t30?file=/index.html

回應 3
分享
檢舉

jasper0047 iT邦新手 5 級 ‧ 2022-08-05 17:14:37 檢舉

因為我目前還有其他的情境使用，像是放在tbale內，且有設置table-layout:fixed，所以效果沒有呈現，不過沒放在table內的情況是有效的，非常感謝！！如果您還有其他建議，再麻煩您！！

river_huang iT邦新手 3 級 ‧ 2022-08-05 17:36:36 檢舉

jasper0047

或是還有一個方法, 針對dropdown-item設置最小寬度.
例如:

.dropdown-menu .dropdown-item {
  min-width: 800px;
}

jasper0047 iT邦新手 5 級 ‧ 2022-08-07 14:54:31 檢舉

好的，感謝您的幫忙！！

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙