كيف أن كلمة كسر في اندفاعة ؟

Question

نظرا بسيطة نسبيا CSS:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

كيف تجعل من ذلك أن السلسلة يبقى مقيدا إلى width من 150, و ببساطة التفاف إلى السطر عن الواصلة ؟

Answer 1

استبدال الخاص بك الواصلات مع هذا:

­

انه دعا "لينة" الواصلة.

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

في جميع المتصفحات الحديثة^* (و في بعض المتصفحات القديمة, أيضا) ، <wbr> عنصر هو أداة مثالية توفير الفرصة لكسر كلمات طويلة في نقاط محددة.

أن أقتبس من هذا الرابط:

كلمة كسر الفرصة (<wbr>) عنصر HTML يمثل الموقف داخل النص حيث المتصفح قد اختياريا كسر خط مع خط كسر القواعد لن وإلا إنشاء استراحة في ذلك الموقع.

هنا هو كيف يمكن أن تستخدم في العملية المثال (أو ترى أنه في العمل في JSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^*لقد اختبرت ذلك في IE9, IE10, وأحدث الإصدارات من الكروم, فايرفوكس, أوبرا, سفاري.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Answer 3

كجزء من CSS3, ليس تأييدا كاملا ، ولكن يمكنك العثور على معلومات حول كلمة التفاف هنا.وثمة خيار آخر هو wbr الوسم ، ، أي من الذي معتمدة بشكل كامل أيضا.

Answer 4

المثال الخاص بك يعمل كما هو متوقع في جوجل كروم, رحلات السفاري (ويندوز) و IE8.النص يخرج من 150px مربع في 3 فايرفوكس و أوبرا 9.5.

بالإضافة إلى ذلك ­ لن تعمل على سبيل المثال الخاص بك ، كما أنه إما:

• العمل عند كلمة كسر ولكن عندما لا كلمة كسر لا يتم عرض أي شرط أو

• العمل عندما لا كلمة كسر ولكن عرض اثنين الواصلات عند كلمة كسر لأنه يضيف واصلة على استراحة.

Answer 5

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

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Answer 6

اعتمادا على ما كنت تريد أن ترى بالضبط ، يمكنك استخدام مزيج من hyphen, soft hyphen, و/أو zero width space.

على لينة الواصلة المتصفح الخاص بك يمكن كلمة كسر (إضافة واصلة).على صفر الفضاء عرض المتصفح الخاص بك يمكن كسر كلمة (دون إضافة أي شيء).

وهكذا ، إذا كان الرمز الخاص بك هو شيء من هذا القبيل :

111111­222222­-333333​444444-​555555

ثم المتصفح الخاص بك سوف تظهر هذا مع أي كلمة كسر :

1111112222222-33333334444444-5555555

و هذا كل word-break :

111111-
222222-
-333333
444444-
555555

مجرد التقاط خيار تحتاج.في حالتك قد تكون واحدة بين 4s و 5s.

Answer 7

يمكنك أيضا استخدام :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

الإخراج:

abababababa
ababababbba
abbabbababa
ababb

كلمة-كسر كسر كل كلمة أو سطر حتى لو لم يكن الفضاء في الجملة التي لا فدان في توفير العرض أو الارتفاع.الجوز الذي يجب أن يكون تقديم العرض أو الارتفاع.

Answer 8

عدم كسر واصلة يعمل بشكل جيد.

HTML الكيان (عشري)

‑

Answer 9

بدلا من - يمكنك استخدام ‐ أو \u2010.

أيضا, تأكد من الواصلات خاصية css كان لا تعيين لا شيء (القيمة الافتراضية هي دليل).

<wbr> غير معتمد من قبل Internet Explorer.

Answer 10

نأمل أن يكون هذا قد يساعد

استخدام <br>(كسر) العلامة التي تريد كسر خط.

Answer 11

يمكنك استخدام 0 width الفضاء بعد حرف واصلة:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

إذا كنت تريد كسر خط قبل استخدام واصلة ​- بدلا من ذلك.