التفاف إلى سطر HTML التالي. كيفية تغليف الكلمات في CSS التي لا تتناسب مع الكتلة؟ جعل كود HTML مناسبًا

21.02.2019

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

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

كيفية التفاف النص على سطر جديد في Excel باستخدام صيغة

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

في النافذة التي تفتح، في علامة التبويب "محاذاة"، يجب عليك تحديد المربع الموجود بجوار "التفاف الكلمات" كما هو موضح في الصورة، وإلا فلن يتم عرض التفاف السطر في Excel بشكل صحيح باستخدام الصيغ.

كيفية استبدال واصلة في Excel بحرف آخر والعودة باستخدام صيغة

يستطيع تغيير رمز الواصلة إلى أي حرف آخر، على سبيل المثال في الفضاء، وذلك باستخدام وظيفة النصاستبدال في Excel

لنأخذ مثالاً على ما هو موجود في الصورة أعلاه. لذلك، في الخلية B1 نكتب الدالة SUBSTITUTE:

البديل (A1،CHAR(10)، " ")

A1 هو النص الخاص بنا مع فاصل أسطر؛
CHAR(10) عبارة عن فاصل أسطر (نظرنا إلى هذا في موضع أعلى قليلاً في هذه المقالة)؛
"" عبارة عن مسافة لأننا نقوم بتغيير فاصل الأسطر إلى مسافة

إذا كنت بحاجة إلى القيام به عملية عكسية- قم بتغيير المسافة إلى واصلة (رمز)، فستبدو الوظيفة كما يلي:

بديل(A1; "";CHAR(10))

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

كيفية تغيير الواصلة إلى مسافة والعودة في Excel باستخدام البحث - استبدال

هناك أوقات تكون فيها الصيغ غير ملائمة للاستخدام ويجب إجراء عمليات الاستبدال بسرعة. للقيام بذلك، سوف نستخدم البحث والاستبدال. حدد النص الخاص بنا واضغط على CTRL+H، ستظهر النافذة التالية.

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

بعد ذلك، في حقل "استبدال بـ"، أدخل مسافة أو أي حرف آخر تريد التغيير إليه وانقر على "استبدال" أو "استبدال الكل".

بالمناسبة، يتم تنفيذ ذلك بشكل أكثر وضوحا في Word.

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

لا يمكنك تغيير فواصل الأسطر فحسب، بل يمكنك أيضًا تغيير فواصل الأسطر الأخرى رموز خاصةللحصول على الرمز المقابل، تحتاج إلى النقر فوق الزر "المزيد >>" و"خاص" واختيار الرمز الذي تحتاجه. أذكرك بذلك هذه الوظيفةموجودة فقط في Word، ولن تعمل هذه الرموز في Excel.

كيفية تغيير فاصل الأسطر إلى مسافة أو العكس في Excel باستخدام VBA

دعونا نلقي نظرة على مثال للخلايا المحددة. أي أننا نختار الخلايا المطلوبة ونقوم بتشغيل الماكرو

1. قم بتغيير المسافات إلى واصلات في الخلايا المحددة باستخدام VBA

SpacesToHyphens الفرعية ()
لكل خلية في التحديد
cell.Value = Replace(cell.Value, Chr(32) , Chr(10))
التالي
نهاية الفرعية

2. قم بتغيير الواصلات إلى مسافات في الخلايا المحددة باستخدام VBA

Sub WrapsToSpaces()
لكل خلية في التحديد
cell.Value = Replace(cell.Value, Chr(10) , Chr(32))
التالي
نهاية الفرعية

الكود بسيط جدًا: Chr (10) عبارة عن فاصل أسطر، وChr (32) عبارة عن مسافة. إذا كنت بحاجة إلى التغيير إلى أي رمز آخر، فما عليك سوى استبدال رقم الرمز المطابق للرمز المطلوب.

رموز الأحرف لبرنامج Excel

تُظهر الصورة أدناه رموزًا مختلفة والرموز المقابلة لها؛ وتمثل عدة أعمدة خطوطًا مختلفة. لتكبير الصورة، اضغط على الصورة.

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

لماذا تتحمل "ما لا يطاق"

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

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

حل مشكلة التفاف الكلمات باستخدام HTML

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

  • باستخدام رمز الاستراحة الناعمة -- يسمح لك بتحديد موقع الاستراحة كلمة مركبة. عند تغيير حجم نافذة المتصفح، يتم نقل جزء الكلمة الطويلة فقط بعد ­ إلى السطر التالي، وبعد النصف الأول يتم عرض واصلة تشبه الواصلة:

مثال على مركب كيميائي معقد ونص - حمض ميثيل بروبينيلين ثنائي هيدروكسي-سيسينامينيلاكريليك



  • باستخدام علامة - ظهر العنصر في HTML 5. كما أنه يعمل على إخبار المتصفح بمكان كسر كلمة معقدة أو طويلة. ولكن على عكس الحرف الخاص السابق، لا يتم عرض هذه العلامة في المكان “ عيب» الواصلة، والتي يمكن أن تؤثر سلبًا على سهولة قراءة النص بأكمله:

ميثيل بروبينيلين ثنائي هيدروكسي سينا حمض المينيلاكريليك



دعم العلامات في بعض المتصفحات تم تنفيذها بشكل غير صحيح. ستعمل فيها إذا تم تحديدها في كود CSS خاصية العرضمع القيمة المضمنة كتلة.

تغليف الكلمات باستخدام CSS

قبل أن نقوم بتعطيل التفاف الكلمات في CSS، دعونا نلقي نظرة على بعض الخصائص التي يمكن أن تحل المشكلة الرئيسية:

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

ومع ذلك، فإن هذه الخاصية "يدركها" الجميع المتصفحات الحديثةوهو حل فعالمشاكل مع الواصلة من الكلمات الطويلة. يأخذ التفاف الكلمات القيم التالية:

  • عادي - الكلمات ليست موصولة بواصلة؛
  • كلمة فاصلة النقل التلقائيكلمات؛
  • يرث - يرث قيمة الوالد.

مثال يوضح استخدام هذه الخاصية:

حمض ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك



في مواصفات CSS الجديدة، تمت إعادة تسمية الخاصية word-wrap إلى overflow-wrap . تقبل كلا الخاصيتين نفس القيم. لكن دعم الالتفاف الفائض لا يزال يتم تنفيذه بشكل سيئ، لذا من الأفضل استخدامه نسخة قديمةملكيات:

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

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

تأخذ الخاصية ثلاث قيم:

  • عادي - يتم استخدام قواعد النقل الافتراضية؛
  • فاصل الكلمات - يتم تنفيذ فواصل الأسطر تلقائيًا بحيث تتناسب الكلمة مع أبعاد عرض الحاوية؛
  • Keep-all - تعطيل الواصلة التلقائية للكلمات باللغة الصينية واليابانية والكورية. بالنسبة للغات الأخرى، يكون تأثير القيمة مشابهًا للتأثير العادي.

السنكروفاسوترون

حالة قلقة

الصف الحادي عشر

ميثوكسي كلورودي إيثيل أمينوميثيل بوتيل أمين



  1. الواصلات هي خاصية جديدة تم تقديمها مع إصدار CSS3. فهو يحدد كيفية تعامل المتصفح مع التفاف الكلمات في النص الناتج. تقبل الخاصية عدة قيم:
  • لا شيء - تعطيل التفاف الكلمات في CSS؛
  • يدوي ( القيمة الافتراضية) - يتم تغليف الكلمات في تلك المناطق من كتلة النص حيث يتم تحديد ذلك باستخدام العلامة أو النقل الناعم (-) ؛
  • تلقائي - يقوم المتصفح تلقائيًا بتغليف الكلمات بناءً على إعداداته.

ل العملية الصحيحةالخصائص في العلامة أو

يجب أن تكون السمة lang موجودة بالقيمة "ru" (lang="ru").

الملكية مدعومة أحدث الإصداراتآي إي وأوبرا وفايرفوكس. كل واحد منهم لديه خاصة به خط CSS. الواصلات غير مدعومة في Google Chrome. مثال:

حمض ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك



منع وصل الكلمات

في بعض الأحيان تحتاج إلى التأكد من عرض السطر بأكمله دون انقطاع. يمكن تنفيذ حظر التفاف الكلمات في CSS بعدة طرق:

  • باستخدام مسافة غير منقسمة  ، والذي يتم تثبيته عند فواصل الأسطر أو فواصل الكلمات؛
  • من خلال تحديد الممتلكات مساحة بيضاءمعنى " com.nowrap» ( المساحة البيضاء: nowrap ).

مثال على التنفيذ:

مرات حمض ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك

ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك اثنين

حمض ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك ثلاثي

حمض ميثيل بروبينيلين ثنائي هيدروكسيسينامينيلاكريليك رباعي



الآن يمكنك التحويل من باستخدام CSSحتى أكثر كلمات طويلة. ولكن سيتعين عليك التعامل مع مشكلة الأشخاص الذين يصعب تحملهم بنفسك. حاول التأثير عليهم بطرق CSS

الدرس 5.

في هذا الدرس قمنا بما يلي:
1. دعونا معرفة كيفية القيام بذلك كود أتش تي أم ألكان أكثر ملاءمة وسهلة القراءة بالنسبة لنا.
2. دعونا نلقي نظرة على كيفية التفاف سطر النص بشكل صحيح.

جعل رمز HTML مناسبًا.

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

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

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

الكود الذي ننظر إليه بسيط للغاية، ولكن حتى الآن الفرق في الإدراك البصري ملحوظ. لا توجد قواعد محددة "لترتيب الأمور"؛ كل سيد يقرر بنفسه كيف يكون أكثر ملاءمة له للعمل.

فاصل أسطر HTML. العلامة <br>.

انتبه إلى الصورة. في النسخة الأولى النص مكتوب في سطر واحد، في النسخة الثانية في سطرين.


سيعرض المتصفح كلا الخيارين بنفس الطريقة. سيتم كتابة النص في سطر واحد:


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

العلامة <br>

وعندما تعرفنا على العلامات في الدرس الثالث ذكرت أن هناك علامات لا تحتاج إلى إغلاق. بطاقة شعار <br>يتم استخدام واحد منهم لفواصل الأسطر.
دعونا نطبقها في الكود:

لقد أدخلنا علامة <br>في كود HTML الخاص بنا، والآن عند تشغيل الملف من خلال المتصفح، سيتم نقل جزء من النص إلى السطر التالي.
* لا تنس حفظ التغييرات في المفكرة (Ctrl + S) وتحديث الصفحة في المتصفح (F5).

نص CSS3يتضمن خصائص النص للمساعدة في حل المشكلات المتعلقة بالتفاف النص واقتطاع النص داخل المحتوى.

خصائص CSS3 لتنسيق النص

1. قص خط تجاوز النص

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

بناء الجملة

P (العرض: 300 بكسل؛ الفائض: مخفي؛ المسافة البيضاء: nowrap؛ تجاوز النص: علامات الحذف؛ ) الشكل. 1. قص النص باستخدام خاصية تجاوز النص

2. الواصلة داخل الكلمات فاصل الكلمات

في الوضع الطبيعييتم نقل الكلمات إلى سطر آخر حيث توجد مسافات أو واصلات (" نقل ناعم")، أو في هذه الحالة النقل القسريباستخدام العنصر
. هذا العقاريسمح لك بتعيين قواعد الواصلة داخل الكلمات من أجل طوابير طويلةملء المساحة بالكامل داخل الحاوية. لا يستخدم للغات CJK (الصينية-اليابانية-الكورية). وارث.

بناء الجملة

P (فاصل الكلمات: عادي؛) p (فاصل الكلمات: كسر الكل؛) p (فاصل الكلمات: الاحتفاظ بالكل؛)

3. تغليف الكلمات في سطر التفاف الكلمات

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

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

مميزات CSS3:

من خلال دراسة المقالات التي اخترتها لك أعلاه، ستتعلم الكثير أيضًا خصائص مفيدةوتعرف أيضًا على الميزات الجديدة لـ CSS3، والتي تتيح لك استخدامًا أقل صور أقلمتصل.

إنشاء واصلة الكلمة

نص بدون واصلات

إذا كان شخص ما لا يفهم ما تتحدث عنه نحن نتحدث عن، إليك مثال دون استخدام التفاف الكلمات:

مع الواصلات

فيما يلي مثال حيث نستخدم التفاف الكلمات CSS:

رائع! كيفية القيام بذلك في التعليمات البرمجية؟

الآن، أعتقد أن الجميع يفهم جيدًا ما سنفعله. لذا حان الوقت للتعرف على الخاصية الجديدة التي يمتلكها CSS3!

وهذه الخاصية مكتوبة بهذه الطريقة - الواصلات.

بسيطة، أليس كذلك؟ لكن كل متصفح له بادئاته الخاصة، لذلك يبدو في الكود كما يلي:

لا تنس تمديد النص عبر عرض الكتلة بالكامل باستخدام خصائص محاذاة النص: تبرير، وإلا نتيجة مرغوبةلن ترى.