CSS 또는 자바 스크립트를 사용하여 DIV 측면의 텍스트를 세로로 늘입니다.

Question

너비와 높이가 고정 된 웹 레이아웃 내부에 DIV가 있습니다. 텍스트는 DIV 내부의 일부 컨텍스트에 따라 자동으로 삽입되며 텍스트의 길이는 일반적으로 대부분의 상자가 수직으로 채워집니다. 상자 하단에 빈 줄이 하나 또는 두 개있을 수 있습니다. 비즈니스 요구 사항 : 텍스트 상단과 텍스트 하단은 상자의 상단 및 하단 여백과 정렬되어야합니다. CSS 또는 자바 스크립트 을 통해 자동으로을 통해 텍스트를 수직적으로 스트레칭 (예 : 8 행 조정) 할 수 있습니까?

Answer 1

항상 방법이 있습니다. ;-) 내가 알지 못하는 새로운 속성이 없다면, 순수한 CSS로 이것을하는 것이 어려울 것입니다.

나는 상자의 크기가 변경되지 않습니다 특히 이후, 자바 스크립트와 함께 할 유혹 될 것이다. 정말 수학의 한 무리입니다. 여기에 함께 해킹 된 샘플이 있습니다. 나는 다른 어떤 브라우저에서 그것을 시도하지 않았고, 당신의 마일리지는 달라질 수있다. 그러나 적어도 그것은 점을 뛰어 넘고있다. 바이올린 링크 (두 번째 상자는 기준점으로 추가) : http://jsfiddle.net/j98Rh/

HTML :

<div id="box"> 
    <p> 
    This is a bunch of text, blah blah blah, just a bunch of text. 
    I like to think about whether elves are really just angels who 
    gave up their old jobs to become toymakers because hey... toys! 
    </p> 
</div> 

CSS :

#box { width: 300px; height: 120px; background-color: teal} 
#box p { line-height: 18px; } 

자바 스크립트를 사용하여 jQuery를 :

var $p = $('#box p'); 

var boxHeight = $('#box').height(); 
var lineHeight = parseInt($p.css('line-height')); 
var pHeight = $p.height(); 
var numLines = parseInt(pHeight/lineHeight); 

var newHeight = boxHeight/numLines; 
$p.css('line-height', newHeight + 'px');