Thụt lề bắt đầu từ dòng thứ hai của đoạn văn bằng CSS

Làm cách nào để thụt lề bắt đầu từ dòng thứ hai của đoạn văn?

Tôi đã thử

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

và

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

và

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

Theo nghĩa đen, nó chỉ là dòng thứ hai mà bạn muốn thụt lề, hay nó từ dòng thứ hai (tức là một thụt lề treo )?

Nếu nó là cái sau, một cái gì đó dọc theo dòng JSFiddle này sẽ thích hợp.

    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>

Ví dụ này cho thấy cách sử dụng cùng một cú pháp CSS trong DIV hoặc SPAN tạo ra các hiệu ứng khác nhau.

Đặt lề trái: 2em hoặc lâu hơn sẽ đẩy toàn bộ văn bản bao gồm dòng đầu tiên sang phải 2em. Hơn là thêm thụt lề văn bản (áp dụng cho dòng đầu tiên) dưới dạng -2em hoặc lâu hơn .. Điều này đưa dòng đầu tiên trở lại bắt đầu mà không có lề. Tôi đã thử nó cho các thẻ danh sách

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

Điều này đã làm việc cho tôi:

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

Tôi cần phải thụt lề hai hàng để cho phép một từ đầu tiên lớn hơn trong đoạn văn. Giải pháp một lần rườm rà là đặt văn bản vào một phần tử SVG và định vị phần tử này giống như một <img>. Sử dụng float và thẻ chiều cao của SVG xác định số hàng sẽ được thụt vào, ví dụ:

<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>

• Chiều cao và chiều rộng của SVG xác định khu vực bị chặn.
• Y = 36 là độ sâu của đường cơ sở văn bản SVG và giống như kích thước phông chữ
• margin-top's cho phép căn chỉnh tốt nhất văn bản SVG và văn bản para
• Hai từ đầu tiên được sử dụng ở đây để nhắc nhở việc chăm sóc cần thiết cho những người xuống cấp

Có nó là cồng kềnh nhưng nó cũng không phụ thuộc vào chiều rộng của div chứa.

Câu trả lời ở trên là cho truy vấn của riêng tôi để cho phép (các) từ đầu tiên của một para lớn hơn và được đặt trên hai hàng. Để chỉ cần thụt lề hai dòng đầu tiên của para, bạn có thể thay thế tất cả các thẻ SVG bằng một pixel img sau:

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

Có một bản nháp CSS3 đang hoạt động (hy vọng sẽ sớm) cho phép bạn chỉ viết:

p { text-indent: 200px hanging; }

Theo dõi: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Nếu bạn định dạng như danh sách