كيف يمكنني ضبط عرض لاقتطاع محتوياته المعروضة بصريًا؟

https://stackoverflow.com/questions/480722

20-08-2019
|

سؤال

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

فيما يلي بعض رمز عينة لإظهار مشكلتي:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
    var intervalID = null;

    function btn_onClick()
    {
        // keep it simple, only click once
        var btn = document.getElementById("btn");
        btn.disabled = true;     
        // start shrinking
        intervalID = window.setInterval( "shrinkLeftCell();", 100);
    }

    function shrinkLeftCell()
    {
        // get elements
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");

        // initialize for first pass
        if( "undefined" == typeof( td1.originalWidth))
        {
            td1.originalWidth = td1.offsetWidth;
            td1.currentShrinkCount = td1.offsetWidth;
        }

        // shrink and set width size
        td1.currentShrinkCount--;
        td1.width = td1.currentShrinkCount;  // does nothing if truncating!

        // set reporting values in right cell
        td2.innerHTML = "Desired Width : [" 
                    + td1.currentShrinkCount 
                    + "], Actual : [" 
                    + td1.offsetWidth + "]";

        // Stop shrinking
        if( 1 >= td1.currentShrinkCount)
            window.clearInterval(intervalID);
    }
</script>
</head>
<body>
    <table width="100%" border="1">
        <tr>
            <td id="td1">
                Extra_long_filler_text
            </td>
            <td id="td2">
                Desired Width : [----], Actual : [----]
            </td>
        </tr>
    </table>

    <button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>

لقد حاولت ضبط العرض بطرق مختلفة بما في ذلك

td1.offsetWidth = td1.currentShrinkCount;

td1.width = td1.currentShrinkCount + "px";

td1.style.width = td1.currentShrinkCount + "px";

td1.style.posWidth = td1.currentShrinkCount;

td1.scrollWidth = td1.currentShrinkCount;

td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;

td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;

td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;

أدرك أنه من المحتمل أن أستخدم Div ، لكنني أفضل ألا يتم إنشاء الجدول من عنصر تحكم مقيد ، ولا أرغب حقًا في إعادة كتابة عناصر التحكم ASP.NET.

بعد قولي هذا ، فكرت كجهد أخيرة ، يمكنني على الأقل لف محتويات كل TD1 مع Div ، وسيعتني الفائض بالأشياء ، ولكن حتى استبدال

<td id="td1">
    Extra_long_filler_text
</td>

مع

<td id="td1" style="overflow:hidden;">
    <div style="margin=0;padding:0;overflow:hidden;">
        Extra_long_filler_text
    </div>
</td>

لم ينجح.

هل يعرف أي شخص كيف يمكنني تعيين عرض لاقتطاع محتوياته بصريًا؟

BTW-My Target Browser هو IE7. المتصفحات الأخرى ليست مهمة في الوقت الحالي ، لأن هذا تطبيق داخلي.

المحلول

لقد حاولت للتو إضافة table-layout: fixed; إلى <table> وقد عملت بالنسبة لي على IE7.

في تصميم جدول ثابت ، يعتمد التصميم الأفقي فقط على عرض الجدول ، وعرض الأعمدة ، وليس محتوى الخلايا

الدفع وثائق.

نصائح أخرى

حل CSS

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

td div.masker {
  height:25px;
  width:100px;
  overflow:hidden;
}

<td>
  <div class="masker">
    This is a string of sample text that
    should be hidden when it reaches out of the bounds of the parent controller.
  </div>
</td>

حل جافا سكريبت

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

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

<td id="td1" style="overflow-x:hidden;">

يجب ان يكون

<td id="td1" style="overflow:hidden;">

Overflow-X هي سمة Microsoft CSS ، والتي أصبحت الآن جزءًا من CSS3. أود التمسك بسمات الفائض الأقدم.

تعديل:

كما يذكر Paolo ، تحتاج أيضًا إلى إضافة طرف جدول: ثابت ؛ وحدد عرض الجدول. مثال كامل يتبع.

<html>
<head>
<style>
    table
    {

        table-layout:fixed;
        width:100px;
        }
td
{
    overflow:hidden;
    width:50px;
    border-bottom: solid thin;
    border-top:solid thin;
    border-right:solid thin;
    border-left:solid thin;

}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>

على حد علمي ، ستمتد خلية الطاولة دائمًا لاستيعاب محتوياتها.

هل فكرت في استخدام JavaScript لاقتطاع البيانات في خلايا الجدول التي لديها أكثر من كمية معينة من المحتوى؟ بدلاً من ذلك ، يمكنك القيام بذلك بسهولة أكبر جانب الخادم.

يمكنك استخدام jQuery أو JavaScript العادي لتطويق محتوى زنزانتك (علامات) مع علامات DIV وتعيين عرض ثابت وفيضان: مخفي على هؤلاء بدلاً من ذلك. ليست جميلة ، لكنها ستعمل.

إيتا:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>

نظرًا لأن Div هو العنصر المحيط ، فهذا هو المكان الذي يجب تعيين العرض.

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

لا تنتمي إلى StackOverflow