고정 높이 div 내에 텍스트를 세로로 줄 바꿈하는 방법

Question

참고 : 필자는이 질문을 가능한 가장 좋은 방법이라고 생각하지는 않습니다. 누군가가 내가 구하려고하는 질문에 대해 더 나은 표현을 가지고 있다면 제목을 편집하십시오.

---

일부 고정 된 높이 (및 너비)가있는 div가 있다고 가정 해 보겠습니다.

div의 높이가 증가하면 스크롤바가 나타납니다. 스크롤바 대신 텍스트를 사용하여 다음 '열'유형으로 이동합니다.

예 : 우리 (내가 생각하는)에 대한 감사하게

A1   A1 A6 
A2   A2 A7 
A3   A3 A8 
A4 => A4 A9 
A5   A5 
- - - - - - - - - - - <-- where our fixed height is set. 
A6   
A7   
A8   
A9   

, 텍스트는 실제로 다음과 같은 순서가없는 목록입니다.

<ul> 
<li><a href="">A1</a></li> 
<li><a href="">A2</a></li> 
... 
</ul> 

그래서 기본적으로 열에 약 16 행의 텍스트가있는 회전식 캐롤을 만듭니다. 텍스트가 사용 가능한 높이로 끝나면 텍스트를 바로 볼 수있는 직접적인 방법이 있습니까? 아니면 javascript를 사용하여 목록을 구문 분석하고 div로 나누어서 모두 플로트해야합니까? 왼쪽/오른쪽으로 스크롤하려면 텍스트 (A, B, C ..)의 첫 글자를 기준으로 앵커를 사용하려고합니다.

도움이 될 것입니다. 감사!

편집 : IE8 + (IE6/7에서는 정상적으로 성능이 저하 될 수 있음), Safari, Chrome 및 Firefox에서 작동하는 것이 있습니까? 나는 항상 질문에 다양한 브라우저를 추가하는 것을 잊어 버린다.

Answer 1

CSS3 열을 사용하면 아주 쉽게 수행 할 수 있습니다. 여기에 예를 들어, HTML는 다음과 같습니다

<ul id = "limheight"> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
<li><a href="">Glee is great</a></li> 
</ul> 

CSS :

#limheight { 
    height: 300px; /*your fixed height*/ 
    -webkit-column-count: 3; 
     -moz-column-count: 3; 
      column-count: 3; /*3 in those rules is just placeholder -- can be anything*/ 
} 
#limheight li { 
    display: inline-block; /*necessary*/ 
} 

그리고 약간의 데모 : little link.

희망이 도움이되었습니다!

Answer 2

정확하게 이해했는지는 모르지만 CSS에는 유용하다고 생각되는 열 속성이 있습니다. 여기에 대해 자세히 알아보기 :

http://www.w3schools.com/css3/css3_multiple_columns.asp

참고 : < = IE9에서 작동하므로 조심하지 않습니다.