選択ボックス オプションの幅を制御する方法
選択ボックス内のオプションがボックスの幅を超えると、乱雑な状態になる可能性があります。そして扱いにくい外観。この問題に対処するには、CSS と JavaScript の両方を使用してオプションの幅をカスタマイズし、余分なテキストを切り詰めることができます。
CSS アプローチ:
CSS だけでは解決できません。オプションの幅を設定するには十分ですが、選択ボックス自体の幅を固定するために利用できます。 select 要素の幅を設定すると、オプションはその境界内に制限されます。さらに、ボックスの幅を超えるオプションを隠すために非表示としてオーバーフローすることができ、長いオプションに省略記号の効果が生じます。
select {
width: 250px;
}
option {
white-space: nowrap;
text-overflow: ellipsis;
}
JavaScript アプローチ:
オプションの幅をより細かく制御するには、JavaScript を使用します。次のコード スニペットは、選択ボックスの幅に一致するようにオプションのサイズを動的に変更し、text-overflow を使用してオーバーフロー テキストを切り捨てます。 const 要素 = document.querySelectorAll(selector); const テール = '...'; if (要素 && 要素.長さ) { for (要素の const 要素) { 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}`; } } それ以外 { throw Error('属性 \'data-limit\'' が見つかりません); } } } } window.onload = function() { shortString('.short'); };
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');
};
CSS と JavaScript のアプローチを組み合わせることで、選択ボックス オプションの幅とオーバーフロー動作を最適に制御できます。 CSS ルールにより、選択ボックスが指定された幅内に収まることが保証され、JavaScript コードによりオプションの幅が動的に調整され、余分なテキストが切り詰められます。
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3