اقتطاع السلاسل الطويلة باستخدام CSS:ممكن حتى الآن؟

Question

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

لقد قمت باقتطاع جانب الخادم منطقي العرض (أيعدد أحرف تم تخمينه بشكل أعمى)، ولكن نظرًا لأن "w" أوسع من "i" فإن هذا يميل إلى أن يكون دون المستوى الأمثل، ويتطلب مني أيضًا إعادة تخمين (والاستمرار في التغيير والتبديل) عدد الأحرف لكل عرض ثابت.من الناحية المثالية، سيحدث الاقتطاع في المتصفح، الذي يعرف بدني عرض النص المقدم.

لقد وجدت أن IE لديه text-overflow: ellipsis الخاصية التي تفعل بالضبط ما أريده، ولكنني أحتاج إلى أن يكون هذا عبر المتصفحات.هذا العقار يبدو أنه (إلى حد ما؟) قياسي ولكن غير مدعوم من قبل فايرفوكس.لقد وجدت متنوع الحلول مرتكز على overflow: hidden, ، ولكنها إما لا تعرض علامة القطع (أريد أن يعرف المستخدم أنه تم اقتطاع المحتوى)، أو تعرضها طوال الوقت (حتى لو لم يتم اقتطاع المحتوى).

هل لدى أي شخص طريقة جيدة لملاءمة النص الديناميكي في تخطيط ثابت، أم أن الاقتطاع من جانب الخادم حسب العرض المنطقي جيد كما سأحصل عليه الآن؟

Answer 1

تحديث: text-overflow: ellipsis الآن مدعوم اعتبارًا من Firefox 7 (تم إصداره في 27 سبتمبر 2011).ياي!إجابتي الأصلية تتبع كسجل تاريخي.

لدى جاستن ماكسويل حل CSS عبر المتصفح.إنه يأتي مع الجانب السلبي ولكن عدم السماح بتحديد النص في Firefox.الدفع منشور ضيفه على مدونة مات سنايدر للحصول على التفاصيل الكاملة حول كيفية عمل ذلك.

لاحظ أن هذه التقنية تمنع أيضًا تحديث محتوى العقدة في JavaScript باستخدام innerHTML الملكية في فايرفوكس.راجع نهاية هذا المنشور للحصول على الحل البديل.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml محتويات الملف

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

تحديث محتوى العقدة

لتحديث محتوى العقدة بطريقة تعمل في Firefox، استخدم ما يلي:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

يرى منشور مات سنايدر للحصول على شرح لكيفية عمل ذلك.

Answer 2

مارس 2014:اقتطاع السلاسل الطويلة باستخدام CSS:إجابة جديدة مع التركيز على دعم المتصفح

العرض التجريبي قيد التشغيل http://jsbin.com/leyukama/1/ (أستخدم jsbin لأنه يدعم الإصدار القديم من IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

خاصية -ms-text-overflow CSS ليست ضرورية:إنه مرادف لخاصية Text-overflow CSS، لكن إصدارات IE من 6 إلى 11 تدعم بالفعل خاصية text-overflow CSS.

تم اختباره بنجاح (على Browserstack.com) على نظام التشغيل Windows، لمتصفحات الويب:

• IE6 إلى IE11
• أوبرا 10.6، أوبرا 11.1، أوبرا 15.0، أوبرا 20.0
• كروم 14، كروم 20، كروم 25
• سفاري 4.0، سفاري 5.0، سفاري 5.1
• فايرفوكس 7.0، فايرفوكس 15

ثعلب النار:كما أشار Simon Lieschke (في إجابة أخرى)، يدعم Firefox فقط خاصية Text-overflow CSS من Firefox 7 وما بعده (تم إصداره في 27 سبتمبر 2011).

لقد تحققت مرتين من هذا السلوك على Firefox 3.0 وFirefox 6.0 (تجاوز سعة النص غير مدعوم).

ستكون هناك حاجة إلى مزيد من الاختبارات على متصفحات الويب لنظام التشغيل Mac OS.

ملحوظة:قد ترغب في إظهار تلميح أداة عند تمرير الماوس عند تطبيق علامة القطع، ويمكن القيام بذلك عبر جافا سكريبت، راجع هذه الأسئلة: اكتشاف علامات الحذف لتجاوز النص في HTML و HTML - كيف يمكنني إظهار تلميح الأداة فقط عند تنشيط علامة الحذف

موارد:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Answer 3

إذا كنت موافق مع حل جافا سكريبت، وهناك مسج المكونات في القيام بذلك بطريقة عبر متصفح - راجع <لأ href = "http://azgtech.wordpress.com/2009/07/26 / تجاوز النص-القطع مقابل فايرفوكس عليها عبر مسج / "يختلط =" نوفولو noreferrer "> http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via -jquery /

Answer 4

وOK، فايرفوكس 7 تنفيذها text-overflow: ellipsis وكذلك text-overflow: "string". ومن المقرر الإفراج النهائي ل2011-09-27.

Answer 5

وهناك حل آخر لمشكلة يمكن أن تكون المجموعة التالية من قواعد CSS:

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

.ellipsis:after{
  content:'...';
}

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

وبلدي اثنين سنتا. القبعات إلى تقنية الأصلية بواسطة Justin ماكسويل

Answer 6

لمرجعية، وهنا رابط ل"علة" تتبع تجاوز النص: القطع الدعم في فايرفوكس . يبدو مثل فايرفوكس هو متصفح اليسار الرئيسي الوحيد الذي لا يعتمد حل CSS الأصلي.