[html] CSS로 단락의 두 번째 줄부터 들여 쓰기

Program / 글쓴이

단락의 두 번째 줄부터 들여 쓰기하려면 어떻게해야합니까?

난 노력 했어

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>

스 니펫 확장

이 예는 DIV 또는 SPAN에서 동일한 CSS 구문을 사용하여 다른 효과를 생성하는 방법을 보여줍니다.

답변

왼쪽 여백 만들기 : 2em 정도는 첫 번째 줄을 포함한 전체 텍스트를 오른쪽 2em으로 밀어냅니다. 텍스트 들여 쓰기 (첫 줄에 적용 가능)를 -2em 정도 추가하는 것보다 .. 이렇게하면 여백없이 처음 줄을 다시 시작합니다. 나는 목록 태그를 시도했다

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

답변

이것은 나를 위해 일했습니다. 

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

답변

para에서 더 큰 첫 번째 단어를 허용하려면 두 행을 들여 쓰기해야했습니다. 번거로운 일회성 솔루션은 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 텍스트와 para 텍스트의 최상의 정렬을 허용합니다.
  • 여기서 처음 두 단어를 사용하여 하강기에 필요한 관리를 상기했습니다.

예, 번거롭지 만 포함하는 div의 너비와 무관합니다.

위의 대답은 para의 첫 번째 단어가 더 크고 두 행 위에 배치되도록 내 자신의 쿼리에 대한 것입니다. para의 처음 두 줄을 간단히 들여 쓰려면 모든 SVG 태그를 다음 단일 픽셀 이미지로 바꿀 수 있습니다.

<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

답변

목록으로 스타일을 지정하면

  • 당신은 “text-align : initial”을 할 수 있고 그 다음 줄은 모두 들여 쓰기 될 것입니다. 이것이 귀하의 요구에 맞지 않을 수 있다는 것을 알고 있지만 마크 업을 변경하기 전에 다른 솔루션이 있는지 확인하고있었습니다 ..

    두 번째 줄을 넣는 것도 효과가있을 것 같지만 콘텐츠가 제대로 흐르기 위해서는 인간의 생각이 필요하며, 물론 하드 줄 바꿈 (그 자체로는 신경 쓰지 않음)이 필요합니다.

    • 답변