작은 열의 텍스트에서 CSS 오버플로

Question

나는 자신의 그리드 시스템을 만들었습니다. 그 격자는 내가 margin으로 처리하고 있습니다.

는

그의 HTML 태그는 다음과 같습니다

 <div class="row"> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
     </div> 

data-size 속성은 열 크기가되어야 하는지를 결정하는데 사용됩니다,이 행의 열의 최대 크기를 1에서 이동은 (느릅 나무는 12 내 케이스,하지만 나는 그것을 바꿀 수있다). column에서 여기

.row { 
    overflow: hidden; 
    margin-bottom: 1.95313%; 
    *zoom: 1; } 
    .row:before, .row:after { 
    content: ""; 
    display: table; } 
    .row:after { 
    clear: both; } 

: 그리고 여기

은 CSS의 행의 재산 나는 그런 data-size 1로 작은 열에서 h1 또는 다른 헤더를 넣을 때마다

.row > .column { 
    min-height: 75px; 
    background: #ddd; 
    position: relative; 
    float: left; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    margin-left: 0.97656%; 
    margin-right: 0.97656%; } 

2 일 때, 이것은 발생합니다 :

새 HTML 마크 업 : 당신이 볼 수 있듯이

 <div class="row"> 
      <div class="column" data-size="1"><h1>Header 1 Header 1 Header 1</h1></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
      <div class="column" data-size="1"></div> 
     </div> 

의 column의 폭이 여전히 작동하고 잘. background-color에서 확인할 수 있습니다.

column의 CSS 속성에 overflow: hidden을 넣으려고했지만 텍스트의 일부만 숨 깁니다.

텍스트가 크기가 변경되어 열에 맞도록하려면 어떻게해야합니까?

이것은 header에서만 발생하며 paragraph에서는 오버플로가 발생하지 않습니다.

Demo here

Answer 1

하나의 옵션은 사용하는 것입니다 word-wrap: break-word :

.row > .column { 
    word-wrap: break-word; 
} 

예 :도 http://jsfiddle.net/m32F5/1/

참조 :

• Can I use - CSS3 word-break
• Can I use - CSS Hyphenation