asp.net gridview - منع التفاف كلمة في العمود

StackOverflow https://stackoverflow.com/questions/782428

  •  13-09-2019
  •  | 
  •  

سؤال

على GridView ASP.NET، لدي حقل يطبع سلسلة من قاعدة البيانات. يمكن أن تتراوح هذه البيانات من 10 إلى 100 حرف. عندما تكون أطول من المعتاد، يلف المجال كلمة البيانات، مما يجعل الصف يتناول مساحة رأسية أكثر من الآخرين. أريد أن اقتطاع أي بيانات لا تنسجم على الصف، ثم لديك "..." بجانبها للإشارة إلى وجود المزيد. لست بحاجة إلى السماح لهم بالتغيير الحجم، وأنا فقط لا أريد أي صفوف ذات ارتفاع مختلف. آمل أن يتم ذلك بشكل حيوي على جانب العميل، لأغراض كبار المسئولين الاقتصاديين.

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

كيف يمكنني تطبيق هذه التقنية إلى GridView ASP.NET؟ أفترض أن بعض JavaScript تشارك. إذا كان هذا صحيحا، أفضل ليس استخدم مكتبة مثل JQuery (لا تسأل لماذا - لا يسمح لي باستخدام تبعية خارجية لهذا المشروع).

هل كانت مفيدة؟

المحلول

جدول المحتويات

  1. التوضيح للمشكلة
  2. التوضيح لحل واحد

التوضيح للمشكلة
نسخ HTML التالي في المتصفحات الخاصة بك (على الأقل Firefox و Internet Explorer 7، ولكن يجب أن تحاول Opera أيضا):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div, td
        {
            width: 100px;
            border: solid 1px black;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        content content content content content content
    </div>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    content content content content content content
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

لاحظ أن td العنصر لا يخفي المحتوى الفائض. فقط div العناصر الآن كيفية القيام بذلك. Internet Explorer. td العنصر لا يعرف حتى كيفية التوقف عن التفاف المحتوى.

يتحدث بدقة، وفقا ل اساسي, ، ال td العنصر لا يدعم white-space القاعدة. ال div و th العناصر تفعل.

التوضيح لحل واحد
هذا هو واحد حل المشكلة (تم اختباره في Opera و Firefox و Internet Explorer 7):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        td
        {
            border: solid 1px black;
        }
        div
        {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <div>
                        content content content content content content
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

نصائح أخرى

إذا كنت تعرف المستخدم الخاص بك يستخدم Internet Explorer، فيمكنك استخدام IE التالي فقط CSS:

td.nooverflow
{
  text-overflow:ellipsis;
}

ثم قم بتعيين ItemStyle للعمود الذي تريد إصلاح عرضه <ItemStyle CssClass='nooverfolow'/> (ستحتاج إلى اللعب مع CSS للحصول عليه بشكل صحيح للتطبيق الخاص بك)

لسوء الحظ منذ أن هذا IE فقط، بالنسبة للمتصفحات الأخرى، هناك بعض الاختراقات المتاحة لمحاكاة نفس الشيء:

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top