الطريقة الأكثر أناقة لإجبار عنصر TEXTAREA على التفاف الخط، *بغض النظر* عن المسافة البيضاء

Question

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

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

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

Answer 1

إعدادات CSS word-wrap:break-word و text-wrap:unrestricted يبدو أنها ميزات CSS 3.حظًا سعيدًا في إيجاد طريقة للقيام بذلك في التطبيقات الحالية.

Answer 2

• quirksmode.org لديه نظرة عامة على الأساليب المختلفة.
• هناك سؤال SO ذو صلة: "في HTML، كيفية فصل الكلمات على شرطة؟"
• في المتصفحات التي تدعمه word-wrap: break-word قد يعطي التأثير المطلوب أيضًا.

Answer 3

كسر الكلمات الطويلة بحجم عرض منطقة النص:

1) للمتصفحات الحديثة:

textarea { word-break: break-all; }

2) للتوافق مع IE8 أضف:

textarea { -ms-word-break: break-all; }

https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx

3) إضافة اختراق توافق IE11:

التفاف الكلمات في Internet Explorer 11 لا يعمل

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; } 
}

---

هذا الكود يعمل بشكل جيد على:

-IE 11، كروم 51، فايرفوكس 46 (ويندوز 7)؛

-IE 8، كروم 49، فايرفوكس 18 (ويندوز إكس بي)؛

- إيدج 12.10240، أوبرا 30 (ويندوز 10)؛

Answer 4

هناك العنصر غير القياسي wbr الذي يدعمه على الأقل

ثعلب النار، http://developer.mozilla.org/En/HTML/Element

متصفح الانترنت، http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

والأوبرا.

Answer 5

لقد اختبرت <wbr>, &#8203; و ­ التقنيات.عملت الثلاثة بشكل جيد في IE 7 وFirefox 3 وChrome.

الشيء الوحيد الذي لم يكسر النسخ/اللصق هو <wbr> بطاقة شعار.

Answer 6

وفقًا لاختباراتي، فإن متصفح Firefox فقط هو الذي يتمتع بالسلوك الموصوف بين المتصفحات الحالية.لذا أعتقد أن أفضل رهان لك هو انتظار الإصدار الوشيك لـ Firefox 3.1 لحل مشكلتك :)

Answer 7

الطريقة الأكثر أناقة هي الاستخدام wrap="soft" لتغليف الكلمات بأكملها أو wrap="hard" للتغليف حسب الحرف أو wrap="off" لعدم الالتفاف على الإطلاق على الرغم من الأخير wrap="off" غالبًا ما لا تكون هناك حاجة إليه تلقائيًا كما يستخدمه المتصفح تلقائيًا كما لو كان كذلك wrap="off".
مثال:

<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>