控制選擇框選項的寬度
在HTML 中，透過將樣式屬性套用於select 元素及其子選項元素，可以實現可以指定每個選項的寬度以確保其與選擇框寬度相符。然而，僅使用 CSS 實現這一點可能還不夠。
一種解決方案涉及合併 JavaScript 來進一步控制選項寬度並在必要時啟用文字省略號。提供的 JavaScript 程式碼引入了一個 ShortString 函數，該函數動態調整具有 .short 類別和 data-limit 屬性的選項元素內的文字。
以下是實現此解決方案的方法：
<code class="html"><!-- HTML --> <select name="select" id="select"> <option class="short" data-limit="37" value="Select your University">Select your University</option> <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option> <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option> </select></code>
<code class="css"><!-- CSS -->
select {
width: 250px;
}
option {
width: 250px;
}</code><code class="js"><!-- JavaScript -->
function shortString(selector) {
const elements = document.querySelectorAll(selector);
const tail = '...';
if (elements && elements.length) {
for (const element of elements) {
let text = element.innerText;
if (element.hasAttribute('data-limit')) {
if (text.length > element.dataset.limit) {
element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
}
} else {
throw Error('Cannot find attribute \'data-limit\'');
}
}
}
}
window.onload = function() {
shortString('.short');
};</code>此方法可確保選項寬度與選擇框寬度相同，並且當選項文字超出指定限制時，多餘的文字將替換為省略號。
以上是如何控制選擇框選項的寬度並實現文字省略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
