CSS 패딩 자동 LINEBREAK

나는 다음과 같은 한 HTML :CSS 패딩 자동 LINEBREAK

<div class="container"> 
    <div class="header"> 
    <h1> 
     a very long long long, really very very long headline ... 
    </h1> 
    </div> 
</div>

및 다음 CSS :

.container{ 
    width:200px; 
} 

.header h1{ 
    background-color: #e0e0e0; 
    display: inline; 
    padding: 2px 8px; 
    color: black; 
    font-size: 16px; 
    font-weight: normal; 
    line-height: 30px; 
}

문제는 브라우저가 있기 때문에 긴 헤더와 작은 폭의 LINEBREAK를 추가하는이다 포장 용기. 괜찮아. 하지만 왼쪽 패딩은 깨진 두 번째 및 이후 라인에 추가되지 않습니다. 나는 headhead에 남겨진 negative text-indent와 positive padding으로 이것을 할 수있다. 배경색은 왼쪽으로 이동하지 않으므로 여전히 여백이있을 것입니다.

어떻게 변경할 수 있습니까? 어떤 트릭을 사용할 수 있습니까?

큰 인사, 포크

출처

2014-09-29 Falk

궁금한 점이 있다면, 왜'h1' 태그를 사용하고'display : inline'으로 대체할까요? – Harry

'h1' 태그는 내용을 헤더로 식별하는 역할을합니다. 그러나 헤더는 사용자/클라이언트의 디자인 요구 사항에 따라 인라인 상자로 스타일을 지정할 수 있습니다. –

그냥'display : inline'을 제거하십시오 –

는 display: inline-block;에 display: inline;을 변경해보십시오.

필자가 알고 있듯이 인라인 요소의 왼쪽 및 오른쪽 패딩은 중간에 줄 바꿈이 있는지 여부에 관계없이 요소의 시작과 끝 부분에 적용됩니다. 블록 (또는 인라인 블록) 요소에서 패딩은 전체 요소의 왼쪽과 오른쪽에 적용됩니다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/display을 참조하십시오. 기존 디스플레이 인라인과 함께

출처

2014-09-29 11:43:24

그렇다면 전체 블록을 얻을 수 있습니다. 그러나 나는 줄의 길이가 다르기를 원합니다. 텍스트와 길이가 같습니다. 그래서 헤더를 손으로 나누어야합니까? 그런데 아마 h1의 3 배가 될 것입니다. 의미가 없거나 하나의 h1을 추가해야하고 나머지는 단지 클래스를 추가해야합니다. 복잡한. – Falk

아, 이제 문제가 생깁니다. 결과적으로 쉽게 할 수있는 방법은 없습니다. http://css-tricks.com/multi-line-padded-text/를 참조하십시오. - "Matthew Pennell의 Triple Element Method"가 마음에 드는데, IE를 지원하지 않는 것이 행복하다면 "Adam Campbell 's box-decoration-break Method" 더 좋네요. –

감사합니다. Olly! 위의 의견은 도움이되었습니다. – Falk

: 그것은 currently not supported by IE/Edge 및 considered experimental 것을

-webkit-box-decoration-break: clone; 
box-decoration-break: clone;

주 -하지만 다른 브라우저에서 작동합니다. 옵션 일 수 있습니다!

이것은 비교적 새로운 CSS3 태그로, 다른 답변에는 제공되지 않았을 수 있습니다.

출처

2016-09-11 10:54:09 tsc

CSS 패딩 자동 LINEBREAK

답변

관련 문제