كيفية التحكم في عرض خيارات مربع التحديد

عندما تمتد الخيارات الموجودة داخل مربع التحديد إلى ما هو أبعد من عرض المربع، يمكن أن تؤدي إلى إنشاء غير مرتب والمظهر غير العملي. لمعالجة هذه المشكلة، يمكننا استخدام كل من CSS وJavaScript لتخصيص عرض الخيارات واقتطاع أي نص زائد.

نهج CSS:

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

select {
    width: 250px;
}

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

نهج جافا سكريبت:

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

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 بضبط عرض الخيارات ديناميكيًا واقتطاع أي نص زائد.