[Html] كيفية إعطاء فاصل من css ، دون استخدام <br />؟


Answers

يمكنك استخدام white-space: pre; لجعل عناصر تتصرف مثل <pre> ، والتي تحافظ على الخطوط الجديدة. مثال:

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

لاحظ أن هذا لا يعمل في IE6 أو IE7. لا أعرف عن IE8.

Question

انتاج:

مرحبا
كيف حالك

الشفرة:

<p>hello <br /> How are you </p>

كيف نحقق نفس الإنتاج بدون <br /> ؟




للحصول على قائمة الروابط

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

في ما يلي مثال ، بافتراض جدول المحتويات:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

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

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

لاحظ مزايا الحلول المذكورة أعلاه:

  • بغض النظر عن المسافة البيضاء في HTML ، يكون الإخراج هو نفسه (مقابل.)
  • لم تتم إضافة مساحة إضافية للعناصر (انظر display:block NickG display:block التعليقات)
  • يمكنك التبديل بسهولة بين القوائم الأفقية والرأسية للروابط مع بعض CSS المشتركة دون الدخول في كل ملف HTML لتغيير النمط
  • لا توجد أنماط float أو clear تؤثر على المحتوى المحيط
  • النمط منفصل عن المحتوى (vs. <br/> ، أو pre مع فواصل مشفرة)
  • ويمكن أن يعمل ذلك أيضًا على الروابط a.toc:after باستخدام a.toc:after و <a class="toc">
  • يمكنك إضافة فواصل متعددة وحتى نص البادئة / لاحقة



لجعل أحد العناصر يحتوي على فاصل سطر بعد ذلك ، قم بتعيينه:

display:block;

تظهر العناصر غير المتغيرة بعد عنصر مستوى الكتلة على السطر التالي. العديد من العناصر ، مثل <p> و <div> تقوم بالفعل بحجب عناصر المستوى بحيث يمكنك فقط استخدام تلك العناصر.

لكن في حين أن هذا أمر جيد أن تعرفه ، فإن هذا يعتمد أكثر على سياق المحتوى الخاص بك. في المثال الخاص بك ، لا تريد استخدام CSS لفرض فاصل أسطر. <br /> مناسبة لأن معادلة العلامة p هي الأكثر ملاءمة للنص الذي تعرضه. مزيد من الترميز فقط لتعليق CSS قبالة ذلك غير ضروري. من الناحية الفنية ، ليست فقرة بالضبط ، ولكن لا توجد علامة <greeting> ، لذلك استخدم ما لديك. وصف المحتوى الخاص بك بشكل جيد مع HTMl هو أكثر أهمية - بعد ذلك لديك ثم معرفة كيفية جعلها تبدو جميلة.




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




يعمل هذا في Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}



باستخدام &nbsp; بدلا من المسافات سوف تمنع حدوث كسر.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>



<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

أو

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

المصدر: https://.com/a/36191199/2377343




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

للحفاظ على فواصل الأسطر لا تستخدم المسافات البيضاء pre-line (وليس pre ) كما في:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

إذا كان هناك سلوك آخر مطلوبًا ، فاختر من بين هذه (WS = WhiteSpace، LB = LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

المصدر: مدارس W3




بناء على ما قيل من قبل ، وهذا هو الحل المغلق النقي الذي يعمل.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>






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

clear:both;