html - تعلم - text style css




Ellipsis للنص الفائض في المربعات المنسدلة (6)

HTML محدود جدًا بما يحدده لعناصر التحكم في النموذج. وهذا يترك مجالاً لصانعي نظام التشغيل والمتصفّحين ليفعلوا ما يرونه مناسبًا (مثل select مشرّف جهاز iPhone الذي ، عندما يكون مفتوحًا ، يبدو مختلفًا تمامًا عن القائمة المنبثقة التقليدية).

يبدو أن معظم أنظمة التشغيل تقطع الخيار المختار بدون أي تقطيع. إذا تمكنت من تغيير طريقة اقتطاع النص ، فسيبدو الأمر غريبًا نظرًا لعدم عمل مربعات الاختيار في بقية نظام التشغيل.

إذا كان يزعجك ، فيمكنك استخدام بديل قابل للتخصيص ، مثل Chosen ، والذي يبدو مميزًا عن select الأصلي.

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

أقوم بإصلاح عرض أحد مربعات القائمة المنسدلة (نعم أعرف أن هناك مشكلات في المستعرض عبر إجراء ذلك).

هل هناك طريقة غير js لخفض النص الفائض وإلحاق الحذف؟ تجاوز النص: لا يعمل القطع الناقص لعناصر <select> (على الأقل في Chrome).

select, div {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}
<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

مثال هنا: http://jsfiddle.net/t5eUe/


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

قبل:

بعد:

CSS:

select {
    padding:0 30px 0 10px !important;
    -webkit-padding-end: 30px !important;
    -webkit-padding-start: 10px !important;
}

يتجاهل iOS خصائص padding ولكنه يستخدم خصائص -webkit- بدلاً من ذلك.

http://jsfiddle.net/T7ST2/4/


قد يكون أبسط حل هو الحد من عدد الأحرف في HTML نفسها. لدى Rails مساعد اقتطاع (سلسلة ، طول) ، وأنا متأكد من أن أي الخلفية التي تستخدمها توفر شيئًا مشابهًا.

نظرًا للمشكلات عبر المتصفحات التي تعرفها بالفعل فيما يتعلق بعرض مربعات التحديد ، يبدو لي هذا الخيار الأكثر مباشرة والأقل عرضة للخطأ.

<select>
  <option value="1">One</option>
  <option value="100">One hund...</option>
<select>

يحتوي quirksmode على وصف جيد لخاصية "over-overflow" ، ولكن قد تحتاج إلى تطبيق بعض الخصائص الإضافية مثل "white-space: nowrap"

على الرغم من أنني لا أتعامل بنسبة 100٪ مع سلوك كائن محدد ، إلا أنه من الجدير محاولة هذا أولاً:

http://www.quirksmode.org/css/textoverflow.html


يمكنك استخدام وظيفة jQuery هذه بدلاً من إضافة تلميح Bootstrap

function DDLSToolTipping(ddlsArray) {
    $(ddlsArray).each(function (index, ddl) {
        DDLToolTipping(ddl)
    });
}

function DDLToolTipping(ddlID, maxLength, allowDots) {
    if (maxLength == null) { maxLength = 12 }
    if (allowDots == null) { allowDots = true }

    var selectedOption = $(ddlID).find('option:selected').text();

    if (selectedOption.length > maxLength) {
        $(ddlID).attr('data-toggle', "tooltip")
                .attr('title', selectedOption);

        if (allowDots) {
            $(ddlID).prev('sup').remove();
            $(ddlID).before(
            "<sup style='font-size: 9.5pt;position: relative;top: -1px;left: -17px;z-index: 1000;background-color: #f7f7f7;border-radius: 229px;font-weight: bold;color: #666;'>...</sup>"
               )
        }
    }

    else if ($(ddlID).attr('title') != null) {
        $(ddlID).removeAttr('data-toggle')
                .removeAttr('title');
    }
}

ملف CSS

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

ملف JS

$(document).ready(function () {
    $("#selectDropdownID").next().children().eq(0).addClass("selectDD");
});




css