المقدمة بكسل عرض بيانات لكل حرف في المتصفح الخط

Question

لدي عمود الجدول الذي يحتاج إلى أن تكون محدودة إلى عرض معينة - قل 100 بكسل.في بعض الأحيان نص في هذا العمود هو أوسع من هذا و لا يحتوي على مسافات.على سبيل المثال:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

على سبيل المثال ، على افتراض المتصفح هو فايرفوكس 3 و الخط كان 12بكسل Arial.ما يمكن أن يكون العرض من الحرف "a" ، وعرض حرف "ب" ، وما إلى ذلك ؟

هل لديك بيانات تظهر بكسل عرض كل حرف ؟ أو برنامج لتوليد ؟

أعتقد ذكي مرة واحدة جافا سكريبت script يمكن أن تفعل خدعة.ولكن لا تريد أن تنفق الوقت في إعادة اختراع العجلة إذا كان شخص آخر قد فعلت هذا.أنا بالتأكيد لست أول شخص يأتي ضد هذه المشكلة.

Answer 1

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

وعن طريق الاعراض ثابتة عموما فكرة سيئة.

Answer 2

وماذا عن تجاوز: انتقل

Answer 3

تحويلة JS على وحدة لفعل ذلك

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

TextMetrics   توفر قياسات دقيقة بكسل   لكتل من النص بحيث يمكنك   تحديد بالضبط مدى ارتفاع على نطاق واسع،   بالبكسل، كتلة معينة من النص سوف   يكون.

وأنا واثق من أن هناك مكتبات أخرى المتاحة هناك التي تفعل ذلك أيضا.

Answer 4

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

وجرب هذا بدلا من ذلك:

table-layout: fixed;

وهذا سوف نتأكد من الجدول هو أبدا أكبر من الحجم المحدد.

Answer 5

وهنا هي لغتي حل من جانب العميل الذي خطرت لي. ومن محددة جدا لطلبي ولكن أنا تقاسم هنا في حالة شخص آخر يأتي عبر نفس المشكلة.

وكان يعمل قليلا بسرعة أكبر مما كان متوقعا. ويفترض محتويات الخلايا النص فقط - سوف تمحى أي HTML والتنسيق في عملية تقصير

وهذا يتطلب مسج.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 6

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

Answer 7

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

Answer 8

هل يمكن وضع النص في فترة غير مرئية وقرأت أن يمتد العرض، ولكن basicly هذا يبدو وكأنه شخص يحاول تخريب موقع الويب الخاص بك، وبالتالي أوصي حظر المشاركات بكلمات أطول من ينث معين، على سبيل المثال 30 حرفا دون مسافات (السماح روابط لتكون أطول! -)

و- ولكن نهج بسيط هو وضع كتلة عنصر داخل خلايا الجدول:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

وهذا سوف تتوقف بشكل فعال الجدول التبعثر! س]

Answer 9

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

Answer 10

http://www.css3.info/preview/text-overflow/

وهذه هي وظيفة جديدة من CSS3.

Answer 11

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

Answer 12

ومنذ حجم الخط يمكن تغييرها بسهولة على الجانب المتصفح، يتم حساب من جانب الخادم الخاص بك غير صالحة بسهولة جدا.

وإصلاح جانب العميل سريعة سيكون أسلوب الخلايا الخاصة بك مع سمة تجاوز:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

والبديل الأفضل هو اقتطاع بك جانب الملقم سلاسل وتوفير تلميح بسيط جافا سكريبت التي يمكن عرضها على نسخة أطول. زر "توسيع" قد يساعد أيضا على أنه قد عرض النتيجة في شعبة تراكب.

Answer 13

ما تريده هو <wbr> العلامة.هذا هو علامة HTML التي تخبر المتصفح أن يكون مقبولا لكسر كلمة هنا إذا التفاف ضروري.لن حقن في نص التخزين الثابتة لأن ثم أنت تقارن البيانات الخاصة بك مع أين/كيف سيتم عرض تلك البيانات.ومع ذلك ، فمن المقبول تماما أن حقن فئة من جانب الخادم في التعليمات البرمجية التي يتم عرض مركزية (مثل JSP الوسم أو ربما في وحدة تحكم).هكذا أود أن تفعل ذلك.مجرد استخدام بعض التعبير العادي أن تجد الكلمات التي هي أطول من X الشخصيات حقن هذا الوسم كل X الشخصيات إلى مثل هذه الكلمات.

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