css - كيفية منع الكلمات الطويلة من كسر شعبة بلدي؟




word wrap css (18)

منذ الانتقال من TABLE-layout إلى DIV-layout ، لا تزال هناك مشكلة واحدة شائعة:

المشكلة : تملأ DIV الخاص بك بنص ديناميكي وهناك حتمًا كلمة طويلة تمتد فوق حافة عمود div وتجعل موقعك يبدو غير محترف.

RETRO-WHINING : لم يحدث هذا مع تخطيطات الطاولة. سيتم دائمًا توسيع خلية جدول لعرض الكلمة الأطول.

الشدة : أرى هذه المشكلة حتى في معظم المواقع الرئيسية ، خاصة في المواقع الألمانية حيث الكلمات الشائعة مثل "الحد الأقصى للسرعة" طويلة جدًا ("Geschwindigkeitsbegrenzung").

هل لدى أي شخص حل عملي لهذا؟


HYPHENATOR هو الجواب الصحيح (المذكورة أعلاه). المشكلة الحقيقية وراء سؤالك هي أن متصفحات الويب لا تزال (في عام 2008) بدائية للغاية لدرجة أنها لا تملك ميزة الواصلة. انظر ، ما زلنا في بدايات استخدام الكمبيوتر - يجب علينا التحلي بالصبر. وطالما أن المصممين يحكمون عالم الويب ، فسنواجه صعوبة في انتظار بعض الميزات الجديدة المفيدة.

استكمال: اعتبارًا من كانون الأول 2011 ، أصبح لدينا الآن خيارًا آخر ، مع الدعم الناشئ لهذه العلامات في FF و Safari:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

لقد أجريت بعض الاختبارات الأساسية ويبدو أنها تعمل على إصدار حديث من Mobile Safari و Safari 5.1.1.

جدول التوافق: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable


الواصلة الناعمة

يمكنك إخبار المتصفحات بمكان تقسيم الكلمات الطويلة عن طريق إدخال واصلة ناعمة ( ­ ):

averyvery­longword

قد يتم تقديمه

averyverylongword

أو

averyvery-
longword

يمكن أن يضمن التعبير العادي الجيد أنك لن تقوم بإدخالها ما لم تكن ضرورية:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

تتسم المتصفحات ومحركات البحث بالذكاء الكافي لتجاهل هذا الحرف عند البحث عن نص ، بينما يتجاهل Chrome و Firefox (لم يختبر الآخرين) عند نسخ النص إلى الحافظة.

<wbr> عنصر

هناك خيار آخر يتمثل في ضخ <wbr> ، وهو IE-ism سابق ، وهو الآن في HTML5 :

averyvery<wbr>longword

استراحات بدون واصلة:

averyvery
longword

يمكنك تحقيق الشيء نفسه باستخدام حرف مسافة العرض صفر &#8203; (أو &#x200B ).

هناك أيضًا hyphens: auto CSS hyphens: auto مدعومة hyphens: auto بواسطة أحدث إصدارات IE و Firefox و Safari ( ولكن ليس Chrome حاليًا ):

div.breaking {
  hyphens: auto;
}

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

حل الأنين الرجعية

<table> للتخطيط غير <table> ، ولكن display:table على عناصر أخرى على ما يرام. سيكون ذلك ملتويًا (ومرنًا) مثل طاولات المدرسة القديمة:

div.breaking {
   display: table-cell;
}

overflow white-space: pre-wrap الإجابات white-space: pre-wrap جيدة أيضًا.


CSS Cross Browser Word Wrap

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

أضف هذا إلى css من div: word-wrap: break-word;


إذا كان لديك هذا -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

ما عليك سوى التبديل إلى تنسيق رأسي يحتوي على divs ويستخدم min-width في CSS بدلاً من العرض -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

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


اثنين من الإصلاحات:

  1. overflow:scroll - وهذا يجعل من الممكن رؤية المحتوى الخاص بك على حساب التصميم (أشرطة التمرير قبيحة)
  2. overflow:hidden - فقط يقطع أي تجاوز. هذا يعني أن الناس لا يستطيعون قراءة المحتوى.

إذا كنت (في مثال SO) تريد إيقاف تراكب الحشو ، فربما يتعين عليك إنشاء قسم آخر ، داخل المساحة ، لاحتواء المحتوى الخاص بك.

تعديل: كما هو الحال مع الإجابات الأخرى ، هناك مجموعة متنوعة من الطرق لاقتطاع الكلمات ، سواء كان ذلك من خلال عرض العرض على جانب العميل (لا تحاول أن تفعل هذا من جانب الخادم لأنه لن يعمل أبدًا بطريقة موثوقة ، عبر النظام الأساسي) من خلال JS وإدراج فواصل الأحرف ، أو استخدام علامات CSS غير قياسية و / أو غير متوافقة بشكل كبير ( لا تظهر word-wrap: break-word للعمل في Firefox ).

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

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

تحرير 2 (لمعالجة تعليقك أدناه):

البدء باستخدام خاصية overflow CSS ليست مثالية ولكنها تتوقف عن كسر التصميمات. تطبيق overflow:hidden أولاً. تذكر أن التدفق الزائد قد لا يكسر الحشو بحيث يكون إما div s أو يستخدم حدًا (أيًا كان الأفضل بالنسبة لك).

سيخفي هذا المحتوى الفائض وبالتالي قد تفقد المعنى. يمكنك استخدام شريط التمرير (باستخدام overflow:auto أو overflow:scroll بدلاً من overflow:hidden ) ولكن استنادًا إلى أبعاد div وتصميمك ، قد لا يبدو هذا أو يعمل بشكل رائع.

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

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


اضطررت إلى القيام بما يلي ، إذا لم يتم الإعلان عن الخصائص بالترتيب الصحيح ، فسيؤدي ذلك إلى تقسيم الكلمات عشوائياً في المكان الخاطئ وبدون إضافة واصلة.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

نشر في الأصل من قبل Enigmo: https://.com/a/14191114


الحل الذي عادةً ما أستخدمه لهذه المشكلة هو تعيين قاعدتي css مختلفتين لـ IE والمتصفحات الأخرى:

word-wrap: break-word;

woks مثالي في IE ، ولكن كلمة التفاف ليست خاصية CSS قياسية. إنها ملكية خاصة لشركة Microsoft ولا تعمل في Firefox.

بالنسبة إلى Firefox ، أفضل شيء يمكنك فعله باستخدام CSS هو تعيين القاعدة

overflow: hidden;

للعنصر الذي يحتوي على النص الذي تريد التفافه. لا يلتف النص ، بل يخفي جزء النص الذي يتجاوز حد الحاوية . يمكن أن يكون حلًا رائعًا إذا لم يكن ضروريًا لعرض كل النص (على سبيل المثال ، إذا كان النص داخل علامة <a> )


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

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

يعمل في أحدث إصدارات Chrome و Firefox و Opera.

لاحظ أنني استبعدت العديد من خصائص white-space اقترحها الآخرون - والتي حطمت في الواقع المسافة البادئة بالنسبة لي.


بعد كل كلمة يلتف وفواصل ، والحفاظ على الفائض الخاص بك ومعرفة ما إذا كان هذا يحل مشكلتك. ببساطة قم بتغيير عرض div إلى: display: inline;


فقط فحص IE 7 و Firefox 3.6.8 Mac و Firefox 3.6.8 Windows و Safari:

word-wrap: break-word;

يعمل للوصلات الطويلة داخل div مع عرض مجموعة ولا يتم الإفصاح عنها في css:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

لا أرى أي مشكلات تتعلق بعدم التوافق




نعم ، إذا أمكن ، قم بتعيين عرض مطلق وتعيين overflow : auto يعمل overflow : auto بشكل جيد.


هل تقصد ذلك ، في المتصفحات التي تدعمها ، word-wrap: break-word لا يعمل word-wrap: break-word ؟

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

إذا لم يكن تجاوز السعة حلًا جيدًا ، فستفقد فقط javascript المخصص كلمة طويلة بشكل مصطنع.

ملاحظة: يوجد أيضًا علامة <wbr> break <wbr> Word Break هذه . يتيح ذلك للمتصفح نقطة حيث يمكنه تقسيم الخط. للأسف ، لا تعمل العلامة <wbr> في جميع المتصفحات ، فقط فايرفوكس وإنترنت إكسبلورر (وأوبرا مع خدعة CSS).


وظيفة بسيطة (يتطلب underscore.js) - تعتمد على الإجابةporneL

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('&shy;'));
        });
        return shystring.join(' ');
    };

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

كان الحل الذي نستخدمه هو أولاً استخدام استبدال regex لوضع مسافة خالية من العرض (& # 8203؛) بعد كل 15 حرفًا (نقلاً) ليست مسافات بيضاء أو واحدة من الأحرف الخاصة التي نفضل فيها الفواصل. نقوم بعد ذلك بإجراء استبدال آخر لوضع مسافة خالية من العرض بعد هذه الأحرف الخاصة.

فضاءات العرض الصفري رائعة ، لأنها ليست مرئية على الشاشة. كانت الوصلات الخجولة مربكة عندما أظهرت ، لأن البيانات تحتوي على واصلات مهمة. لا يتم تضمين المسافات صفر العرض أيضًا عند نسخ النص خارج المتصفح.

الأحرف الفاصلة الخاصة التي نستخدمها حاليًا هي الفترة ، وشرطة مائلة للأمام ، وشرطة مائلة للخلف ، وعلامة فاصلة ، وشرطة سفلية ، و @ ، و ، و واصلة. لا تظن أنك ستحتاج إلى القيام بأي شيء لتشجيع كسر الواصلات ، ولكن Firefox (3.6 و 4 على الأقل) لا يتكسر بنفسه عند الواصلات المحاطة بأرقام (مثل أرقام الهواتف).

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

ها هي الكود من المحتمل أنك تسمي الدالات في حزمة المرافق:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^\\s\\.\/\\,[email protected]\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1&#8203;') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1&#8203;'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,[email protected]\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

اختبار مثل هذا:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

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

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

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

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

فعلنا شيئين:

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

هذا يعمل بشكل جيد ، كما يفعل الأسلوب نفسه ، لكنه حكاية تحذيرية.

التحديث رقم 4: نحن نستخدم هذا في سياق قد تكون فيه البيانات التي تم تغذيتها بهذا HTML. في ظل الظروف المناسبة ، يمكن إدراج مسافات خالية من العرض في منتصف كيانات HTML ، مع نتائج غير تقليدية.

كان الإصلاح هو إضافة علامة العطف إلى قائمة الأحرف التي لا نكسرها ، على النحو التالي:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,[email protected]\\|-]{' + position + '})(?=[^&\\s\\.\/\\,[email protected]\\|-])', 'g');

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}




html