تحديد عرض السلسلة المطبوعة بواسطة تطبيق ويب

https://stackoverflow.com/questions/33893

09-06-2019
|

سؤال

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

حاليًا، أقوم باقتطاع عدد معين من الأحرف.نظرًا لأن الخط ليس أحادي النمط، فإن الاستعلام عن جميع حروف I يكون أضيق من استعلام جميع حروف W.أود أن تكون جميعها بنفس العرض تقريبًا قبل علامات الحذف.هل هناك طريقة للحصول على العرض التقريبي للسلسلة الناتجة بحيث تظهر علامات الحذف لأي سلسلة معينة بنفس عدد وحدات البكسل تقريبًا من البداية؟هل لدى CSS طريقة؟هل PHP؟هل سيتم التعامل مع هذا بشكل أفضل بواسطة JavaScript؟

المحلول

إليك فكرة أخرى عنها ولا يتعين عليك العيش بدون علامات الحذف!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Short text. Fail!
    </div>
</body>

</html>

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

[يحرر:26/06/2009]

بناءً على اقتراح Power-Coder، قمت بمراجعة هذا قليلاً.هناك بالفعل تغييران فقط، إضافة doctype (انظر الملاحظات أدناه) وإضافة display: inline-block السمة على .qrytxt DIV.هنا هو ما يبدو الآن...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

ملحوظات:

تم عرضها في IE 8.0، Opera 9، FF 3
أ doctype مطلوب لـ IE للحصول على display: inline-block للعمل بشكل صحيح.
إذا .qrytxt يحدث تجاوز DIV في كلمة طويلة، وستكون هناك فجوة واسعة بين علامة الحذف وآخر كلمة مرئية.يمكنك رؤية ذلك من خلال عرض المثال وتغيير حجم عرض المتصفح الخاص بك بزيادات صغيرة.(ربما كان هذا موجودًا في المثال الأصلي أيضًا، ربما لم ألاحظه بعد ذلك)

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

[يحرر:27/06/2009]

إليك بديل آخر يستخدم ملحقات محددة للمتصفح.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
        div.sidebox 
        {
            width: 26%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -ms-text-overflow:ellipsis;
            -moz-binding:url(ellipsis-xbl.xml#ellipsis);
            white-space:nowrap;
        }
    </style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Short text. FTW
        </div>
    </div>
</body>
</html>

لاحظ أنه لكي يعمل المثال أعلاه، يجب عليك إنشاء ملف xml المشار إليه بواسطة قاعدة -moz-binding، القطع-xbl.xml.يجب أن يحتوي على ملف XML التالي:

<?xml version="1.0" encoding="UTF-8"?>
  <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>

نصائح أخرى

يمكنك أيضًا بسهولة استخدام القليل من جافا سكريبت:

document.getElementByID("qrytxt").offsetWidth;

سيعطيك عرض العنصر بالبكسل ويعمل حتى في IE6.إذا قمت بإلحاق امتداد يحتوي على علامات حذف في نهاية كل استعلام، فيمكن استخدام اختبار منطقي بسيط في JavaScript مع القليل من معالجة CSS لإخفائها/إظهارها حسب الحاجة.

هل لدى CSS طريقة؟

لا

هل PHP؟

لا

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

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

إذا كان بإمكانك العيش بدون الخلفية...، فيمكنك تزييفها بشكل جيد باستخدامها div العلامات وCSS overflow: hidden, ، مثله:

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

يجب استبعاد لغة PHP تمامًا نظرًا لأنه على الرغم من وجود وظيفة مصممة لقياس الخطوط، http://www.php.net/imageftbbox ، لا توجد طريقة لـ PHP لمعرفة ما إذا كان لدى الزائر حد أدنى لحجم الخط أكبر من حجم الخط المتوقع.

@ روبرت

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

أعلم أنه أمر مبتكر جدًا، لكن الأمر يستحق المحاولة، أليس كذلك؟

يحرر فكرة اخرى:تحديد موضع div الذي يحتوي على علامات الحذف باستخدام جافا سكريبت، وإذا لم يتم دفعه بالكامل بشكل صحيح، فهل قم بإخفائه؟

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow