كيفية إنشاء كل متصفح متوافق مع بادئة معلقة في نمط CSS في فترة

StackOverflow https://stackoverflow.com/questions/11809

  •  08-06-2019
  •  | 
  •  

سؤال

الشيء الوحيد لقد وجدت كانت ؛

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

السبيل الوحيد لهذا العمل هو وضع النص في الفقرة التي تسبب تلك فظيعة القبيحة خطوط إضافية.أنا أفضل أن يكون لهم فقط في <span class="hang"></span> نوع من الشيء.

أنا أيضا أبحث عن طريقة لزيادة المسافة البادئة من مجرد مستوى واحد من معلقة.باستخدام الفقرات كومة indentions لا يعمل.

هل كانت مفيدة؟

المحلول

<span> هو مضمنة عنصر.مصطلح بادئة معلقة لا معنى لها إلا إذا كنت تتحدث عن الفقرة (الذي يعني عموما كتلة العنصر).يمكنك بالطبع تغيير هوامش على <p> أو <div> أو أي كتلة العنصر إلى التخلص من خارج المسافة العمودية بين الفقرات.

قد تريد شيئا مثل display: run-in, حيث الوسم سوف تصبح إما كتلة أو مضمنة اعتمادا على السياق...للأسف, هذا هو لم تؤيده جميع المتصفحات.

نصائح أخرى

وجدت طريقة رائعة للقيام بذلك فقط ، ناقص سيئة span.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

لطيفة وبسيطة :D

إذا كان أسطر تزعجك في p كتل ، يمكنك إضافة

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

JSFiddle سبيل المثال

ysth الجواب هو أفضل مع واحد قابل للنقاش استثناء ؛ وحدة القياس يجب أن تتوافق مع حجم الخط.

p {
  text-indent: -2en; 
  padding-left: 2en;
}

"3" من شأنه أيضا أن يعمل على نحو كاف ؛ "م" لا ينصح كما هو أوسع من المتوسط حرف في أبجدية مجموعة."px" يجب أن يستخدم فقط إذا كنت تهدف إلى محاذاة معلقة من كتل النص مع اختلاف أحجام الخطوط.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top