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


102

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

난 노력 했어

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

첫 줄 텍스트 들여 쓰기가 모두 0으로 설정된 이유는 무엇입니까? 또한이 작업을 수행하는 방법을 모르겠지만이 목록에서 누락 된 것이 가장 의미있는 패딩입니다.
Skarlinski

답변:


211

그것은 당신이 들여 원하는 바로 두 번째 줄 문자 그대로, 또는은 에서 두 번째 줄 (예. 내어 쓰기 )?

후자의 경우이 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 구문을 사용하여 다른 효과를 생성하는 방법을 보여줍니다.


3
@Reuben 지금 삭제 된 귀하의 의견을 바탕으로 두 번째 줄에서 얼굴을 의미한다고 가정합니다. 향후 방문자를 위해 구문이 div 또는 span이 아닌 P 인 경우이 바이올린이 더 좋습니다. jsfiddle.net/gg9Hx
redditor

1
왜 패딩이 왼쪽이고 음수 텍스트 들여 쓰기입니까? 왜 그렇게 작동해야합니까? 이상해 보인다. 왜 긍정적이지 text-indent않습니까?
Don Cheadle 2015

2
텍스트 들여 쓰기는 범위에 영향을주지 않습니다. 동일한 결과를 위해 스팬의 스타일에서 제거 할 수 있습니다.
Sam Hasler

25

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

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

24

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

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

10
이것은 OP가 요청한 것과 완전히 반대되는 것 같습니다. @techillage의 버전이 정확합니다. 당신은 주위에 마이너스를 교환 할 필요가
알렉스 Holsgrove

1
이것은 거의 정확히 내가 필요로하는 것입니다. CMS에서 이러한 방식으로 스팬을 추가 할 자유가 없기 때문에 허용 된 답변이 저에게 적합하지 않습니다. 여기서 해결책에 대한 유일한 문제는 왼쪽 여백이 전체 단락을 컨테이너 외부로 끌어 당긴다는 것입니다. 그래서 'position : relative'와 'left : 2em'을 추가했는데 완벽합니다. @AlexHolsgrove의 의견과 달리 techillage의 대답은 전혀 작동하지 않았지만 아마도 목록 요소 에서이 작업을 수행하지 않기 때문일 수 있습니다.
Stu Furlong

2

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;" />


1

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

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

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


  • 1
    Stackoverflow에 오신 것을 환영합니다. 이 들여 쓰기 문제에 대한 해결책이있는 것 같습니다. 그러나 마크 업을 제공하고 솔루션을 설명하면 모두에게 큰 도움이 될 것입니다. jsfiddle.net 또는 다른 서비스를 사용하여 작동하는 데모를 만들 수 있습니다. 모두 제일 좋다.
    EGL 2-101 2015
    당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
    Licensed under cc by-sa 3.0 with attribution required.