wordwrap سلسلة طويلة جدًا

Question

كيف يمكنك عرض سلسلة طويلة أو عنوان موقع ويب أو كلمة أو مجموعة من الرموز مع فواصل الأسطر التلقائية للحفاظ على عرض div؟أعتقد أن التفاف الكلمات من نوع ما.عادةً ما تعمل إضافة مسافة ولكن هل يوجد حل CSS مثل التفاف الكلمات؟

على سبيل المثال، يتداخل (بشكل سيء للغاية) مع divs، ويفرض التمرير الأفقي وما إلى ذلك.www.www.www.www.www.www.www.www.www.www.www.www.www.www.www.www.www.www.www.

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

Answer 1

لقد تم طرح هذا السؤال هنا من قبل:

• من قام بحل مشكلة فواصل الكلمات الطويلة في my-div؟(تَلمِيح:ليس تدفق المكدس)
• التفاف الكلمات في CSS/JS
• CSS:كيف يمكنني فرض تغليف سلسلة طويلة (بدون أي فراغ) بتنسيق XUL و/أو HTML
• تجاوز سعة CSS مع عنوان URL الطويل

قصة طويلة قصيرة:

بقدر ما تذهب حلول CSS لديك: overflow: scroll; لإجبار العنصر على إظهار أشرطة التمرير و overflow:hidden; لقطع أي نص إضافي.هنالك text-overflow:ellipsis; و word-wrap: break-word; لكنهم IE فقط (break-word موجود في مسودة CSS3، ومع ذلك، سيكون الحل لهذه المشكلة بعد 5 سنوات من الآن).

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

Answer 2

وword-wrap: break-word; متاح في IE7 +، FF 3.5 و بكت تمكين المتصفحات (سفاري / كروم الخ). للتعامل مع IE6 سوف تحتاج أيضا إلى إعلان word-wrap: break-all;

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

ولقد أخذت نظرة على W3 مواصفات حيث الواصلة في CSS3 تم نقاشها. للأسف يبدو أن هناك بعض الاقتراحات ولكن لا شيء ملموس حتى الان. يبدو أن الباعة المتصفح هي لم تنفذ أي شيء إما بعد. لقد راجعت كل من موزيلا وبكت لرمز المسجلة الملكية ولكن ليس هناك دليل على أي.

Answer 3

وword-break:break-all يعمل على علاج

Answer 4

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

* {
   overflow-wrap:hyphenate. 
}

وdoesen't قال يبدو أن تدعم بأي شكل من الأشكال فقط ولكن في وقت كتابة على اي فون أو فايرفوكس، وتجاوز الختامية: ربط الكلمات بالواصلة ليست حتى في مسودة العمل.

في هذه الأثناء فما استقاموا لكم فاستقيموا استخدام:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Answer 5

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Answer 6

وأنا استخدم رمز لمنع كل السلاسل الطويلة، عناوين وهلم جرا ..

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Answer 7

ونأمل يوما ما سوف الحصول على ممتلكات word-wrap في CSS3: قوة الالتفاف: 'كلمة ختامية "الملكية

ويوما ما ...

Answer 8

والخلايا عادة سوف تفعل ذلك بشكل طبيعي، ولكن هل يمكن فرض هذا السلوك على شعبة مع:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Answer 9

ودوما تحديد الملكية خط الطول - إذا لم تقم بتحديد، فإنه قد يتسبب في فشل الملكية word-break: break-all; بك

Answer 10

ويبدو أن هذا لا حيلة للحصول على أحدث كروم:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

وأنا لم فحص أي المتصفحات لكن كروم.