كيف يمكنني محاكاة تجاوز النص:علامة الحذف في فايرفوكس؟

Question

لدي بعض النص الديناميكي الموجود في div الذي تم تعيينه على ما يدخله المستخدم في حقل مربع النص.إذا لم يتم احتواء النص في div، فسيتم قطعه الآن عند الحافة ولن يكون النص بأكمله الذي يمتد إلى ما بعد الحدود مرئيًا.أرغب في اقتطاع النص بحيث يتم احتواؤه داخل المربع ويتم إلحاق علامة القطع (...) في نهايته.على سبيل المثال:

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

من الواضح في المثال أن الأمر سهل لأن علامة التعليمات البرمجية تستخدم خطًا ثابت العرض، لذا فهي بسيطة مثل حساب الأحرف.لدي خط متغير العرض، لذا إذا أدخلوا "WWWWWWWWWWW" فسوف يمتلئ بأحرف أقل بكثير من "................".

ما هي الطريقة الأفضل لعمل هذا؟لقد وجدت حلاً محتملاً للعثور ببساطة على عرض البكسل الفعلي للنص هنا: http://www.codingforums.com/archive/index.php/t-100367.html

ولكن حتى مع طريقة كهذه، فإنه من الصعب بعض الشيء تنفيذ علامة الحذف.لذلك، إذا كان مكونًا من 20 حرفًا ووجدت أنه غير مناسب، فسأضطر إلى اقتطاعه إلى 19، وإضافة علامة الحذف، ثم التحقق مما إذا كان مناسبًا مرة أخرى.ثم قم بالاقتطاع إلى 18 (بالإضافة إلى علامة الحذف) وحاول مرة أخرى.ومره اخرى.ومرة أخرى...حتى يصلح.هل هناك طريقة أفضل؟

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

هنا هو الكود الخاص بي:

<div id="tab" class="tab">
    <div id="tabTitle" class="tabTitle">
        <div class="line1">user-supplied text will be put here</div>
        <div class="line2">more user-supplied text will be put here</div>
    </div>
</div>

والأنماط:

.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}    

.tab .tabTitle {
    height: 30px;
width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}

.tab .tabTitle .line1, .tab .tabTitle .line2 {
    display:inline;
    width:auto;
}

وجافا سكريبت الذي يقوم بقص وإضافة علامات الحذف:

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

يتم تمرير divs "line1" و"line2" إلى الوظيفة.إنه يعمل في حالة إدخال كلمة واحدة مثل "WWWWWWWWWWWWWWW" ولكنه لا يعمل في حالة إدخال كلمات متعددة "WWWWW WWWWW WWWWW" لأنه يضيف فقط فواصل أسطر ويقيس النص على أنه عرض "WWWWW".

هل هناك طريقة يمكنني من خلالها إصلاح ذلك دون اللجوء إلى نسخ النص إلى عنصر قياس مخفي؟هل هناك طريقة ما لتعيين نمط خط div بحيث لا يلتف النص؟

Answer 1

<اقتباس فقرة>   

بعض الطرق لتعيين نمط الخط عناصر div بحيث لا التفاف النص؟

وهناك لديك white-space: nowrap ل. نعم، وهذا يعمل في المتصفحات القديمة أيضا.

Answer 2

وهذه مسألة يجب أن يكون يعمل على فايرفوكس أيضا.

وHTML

<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>

وCSS

.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}

وbindings.xml

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
    <content><children/></content>
</binding>
<binding id="ellipsis">
    <content>
        <xul:label crop="end"><children/></xul:label>
    </content>
    <implementation>
        <field name="label">document.getAnonymousNodes(this)[0]</field>
        <field name="style">this.label.style</field>
        <property name="display">
            <getter>this.style.display</getter>
            <setter>if(this.style.display!= val)this.style.display=val</setter>
        </property>
        <property name="value">
            <getter>this.label.value</getter>
            <setter>if(this.label.value!=val)this.label.value=val</setter>
        </property>
        <method name="update">
            <body>
                var strings= this.textContent.split(/\s+/g)
                if(!strings[0])strings.shift()
                if(!strings[strings.length-1])strings.pop()
                this.value=strings.join('')
                this.display=strings.length?'':'none'
            </body>
        </method>
        <constructor>this.update()</constructor>
    </implementation>
    <handlers>
        <handler event="DOMSubtreeModified">this.update()</handler>
    </handlers>
</binding>
</bindings>

Answer 3

إذا كنت تستخدم مسج، هناك يمكنني استخدام.

وبدلا من ذلك، [هذا المثال] (404 غير موجود!) ويبدو للعمل عبر متصفح.

وأي أسئلة، ضربني في التعليقات!

404 الرابط: http://www.hedgerwow.com/360/ دتمل / text_overflow / demo2.php

Answer 4

يجب أن يتضمن الإصدار الجديد من CSS (CSS3). text-overflow:ellipsis, ، الذي يفعل هذا لك.وهو يعمل حاليًا في الإصدار 6 من IE والإصدارات الأحدث، بالإضافة إلى Safari وChrome.إنه غير مدعوم من قبل Firefox، لذا فهذه ليست إجابة مفيدة حقًا حتى الآن، ولكن من الجدير أن نأخذ في الاعتبار أن أفضل طريقة حقيقية ستكون في النهاية السماح لـ CSS بالتعامل مع هذا الأمر.

مسودة مواصفات CSS3: http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

المتصفحات المدعومة: http://www.quirksmode.org/css/contents.html (قم بالتمرير لأسفل إلى "تجاوز النص" بالقرب من الأسفل)

Answer 5

وبكل بساطة، لا، ليس هناك طريقة أفضل من دون اللجوء الى الخارقة.

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

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

Answer 6

استخدم text-overflow:ellipsis. ليست IE فقط ... معظم متصفح رئيسي يمكن أن تفعل هذا.
ولكن إذا كنت لا يمكن هنا هو مسج المساعد للحصول على ذلك.

Answer 7

للإجابة على واحدة فقط من النقاط التي أثرتها:

لذلك إذا كان 20 حرفًا ووجدت أنه غير مناسب ، فسيتعين عليّ اقتطاع 19 حرفًا ، وإضافة علامات القطع ، ثم تحقق مما إذا كان يناسب مرة أخرى.ثم اقتطاع إلى 18 (بالإضافة إلى القطع القطع) وحاول مرة أخرى.ومره اخرى.ومرة أخرى ... حتى تناسب.هل هناك طريقة أفضل؟

هناك طريقة أسرع بكثير للعثور على الطول الصحيح وهي قطع الخيط إلى نصفين، واختبار ذلك لمعرفة ما إذا كان مناسبًا أم لا.إذا حدث:أضف ربع الطول الأصلي مرة أخرى، وإذا لم يقطع الربع، فاختبر ذلك لمعرفة ما إذا كان مناسبًا.كرر بشكل متكرر مع 1/8، 1/16، 1/32، ...من الطول الأصلي، حتى تصبح قيمة الإضافة/الطرح هذه أقل من 1.

إنها خوارزمية البحث:بالنسبة للسلاسل الأطول من بضع كلمات، يمكنك عادةً تقليل عدد الاختبارات التي تحتاج إلى إجرائها في DOM بمعامل 10.

Answer 8

وجرب هذا:

رابط واحد

تحديث:

إذا كنت تستخدم الملكية {التفاف: كسر كلمة؛}، IE سوف يجبر كسر خط. المتصفحات الحديثة يمكن أن يكون الافتراضي. {فيض: مرئية؛}، وأنها تجاوز بشكل صحيح، دون توسيع الحاوية

Answer 9

لا، انها ليست مهمة بسيطة. كان علي أن أفعل قبل الشيء نفسه من العام وجدت أن حتى برنامج Internet Explorer (من الإصدار 6)، وأوبرا وسفاري تستطيع أن تفعل ذلك، ولكن لا فايرفوكس. يمكن آسف لذلك، فقط الخارقة يوفر لك

Answer 10

dojox.html.ellipsis

Answer 11

ومع أوبرا:

-o-text-overflow:ellipsis;

Answer 12

لقد تغيرت this.value=strings.join('') ل this.value=strings.join(' ') من بنيامينالرد، وعملت بالنسبة لي بشكل جيد!

Answer 13

ومعلومات عن فايرفوكس 4.0 و، لا يزال حبرا على ورق، والملكية text-overflow:ellipsis CSS:

هذا الرابط يعطي حلا جزئيا لهذه المشكلة.

ووتنتج نتيجة مماثلة لtext-overflow:ellipsis باستخدام المغلق فقط.