تعيين عرض خيارات مربع التحديد

في كود HTML المحدد، عرض خيارات مربع التحديد يتجاوز عرض التحديد الصندوق نفسه. لحل هذه المشكلة والتأكد من محاذاة عرض الخيار مع عرض مربع التحديد، دعنا نطبق نمط CSS.

حل CSS:

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

من خلال تعيين عرض كل من مربع التحديد وخياراته على 250 بكسل، فإننا نفرض العرض المطلوب. بالإضافة إلى ذلك، نقوم بتطبيق خاصية overflow: Hidden لإخفاء أي نص يتجاوز حدود الخيار، مما يضمن عدم تجاوز النص لمربع التحديد.

ملاحظة: ومع ذلك، فإن CSS قد لا يقوم الحل بتقييد عرض الخيار بالكامل بالحجم الدقيق لمربع التحديد في جميع المتصفحات بسبب الاختلافات المحتملة في محركات العرض.

حل جافا سكريبت:

بدلاً من ذلك، يمكن تنفيذ وظيفة 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');
};

تتيح لك هذه الوظيفة تحديد حد العرض لكل خيار باستخدام سمة حد البيانات. سيتم اقتطاع الخيارات التي تتجاوز الحد وإلحاقها بعلامة القطع (...).