การเยื้องเริ่มต้นจากบรรทัดที่สองของย่อหน้าด้วย CSS

ฉันจะเยื้องโดยเริ่มจากบรรทัดที่สองของย่อหน้าได้อย่างไร

ฉันได้ลองแล้ว

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

และ

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

และ

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

แท้จริงแล้วเป็นเพียงบรรทัดที่สองที่คุณต้องการเยื้องหรือมาจากบรรทัดที่สอง (เช่นการเยื้องห้อย )?

หากเป็นอย่างหลังสิ่งที่อยู่ในบรรทัดของJSFiddleนี้จะเหมาะสม

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

ตัวอย่างนี้แสดงให้เห็นว่าการใช้ไวยากรณ์ CSS เดียวกันใน DIV หรือ SPAN สร้างเอฟเฟกต์ที่แตกต่างกันอย่างไร

ทำขอบซ้าย: 2em หรือมากกว่านั้นจะดันข้อความทั้งหมดรวมทั้งบรรทัดแรกไปทางขวา 2em กว่าเพิ่มการเยื้องข้อความ (ใช้ได้กับบรรทัดแรก) เป็น -2em หรือมากกว่านั้น .. ซึ่งจะทำให้บรรทัดแรกกลับมาเริ่มต้นโดยไม่มีขอบ ฉันลองใช้แท็กรายการ

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

p { margin-left: -2em; 
 text-indent: 2em 
 }

ฉันต้องเยื้องสองแถวเพื่อให้คำแรกใหญ่ขึ้นในย่อหน้า วิธีแก้ปัญหาแบบครั้งเดียวที่ยุ่งยากคือการวางข้อความในองค์ประกอบ SVG และวางตำแหน่งนี้เหมือนกับ <img> การใช้ float และแท็กความสูงของ SVG กำหนดจำนวนแถวที่จะเยื้องเช่น

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

• ความสูงและความกว้างของ SVG กำหนดพื้นที่ที่ถูกปิดกั้น
• Y = 36 คือความลึกของเส้นฐานข้อความ SVG และเหมือนกับขนาดตัวอักษร
• margin-top ช่วยให้สามารถจัดตำแหน่งข้อความ SVG และข้อความพาราได้ดีที่สุด
• ใช้สองคำแรกที่นี่เพื่อเตือนการดูแลที่จำเป็นสำหรับลูกหลาน

ใช่มันยุ่งยาก แต่ก็ไม่ขึ้นกับความกว้างของ div ที่มี

คำตอบข้างต้นคือแบบสอบถามของฉันเองเพื่อให้คำแรกของ para มีขนาดใหญ่ขึ้นและวางตำแหน่งไว้เหนือสองแถว ในการเยื้องสองบรรทัดแรกของพาราคุณสามารถแทนที่แท็ก SVG ทั้งหมดด้วย img พิกเซลเดียวต่อไปนี้:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

มี CSS3 แบบร่างการทำงานที่ (หวังว่าเร็ว ๆ นี้) จะช่วยให้คุณสามารถเขียน:

p { text-indent: 200px hanging; }

จับตาดู: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

หากคุณมีสไตล์เป็นรายการ