2010-05-25 1 views
7

HTML에서 여러 줄에 걸쳐 텍스트가 균등하게 분배되는 방법이 있습니까?HTML의 균형있는 텍스트 배치

예, 내가 원하는하지 않습니다

 
    Here is some really long label that ends up on 
    two lines. 

내가 선호하는 것 : 순수 HTML/CSS에서

 
        Here is some really long label 
         that ends up on two lines. 
+1

['텍스트 랩 : balance'] (https://www.w3.org/TR/css-text-4/# text-wrap)이 작동 중입니다. – Gajus

답변

13

Adobe는 새로운 CSS 속성을 text-wrap: balance으로 추가 할 것을 제안했습니다.

그 동안 동일한 결과를 얻으려면 balance-text이라는 jQuery 플러그인을 만들었습니다.

1

을이 작업을 수행 할 수있는 방법이없는, 전혀 없기 때문에 길의 길이를 측정하는 방법.

이렇게하는 한 가지 방법은 javascript를 사용하는 것이지만, 자바 스크립트가 줄 길이를 계산하여 그에 따라 분할하는 동안 FOBUC로 끝납니다.

PHP/ASP/당신이 사용하는 무엇이든간에 라인을 분리하는 것이 가장 좋은 방법입니다.

+1

글쎄, "최선의 방법"은 다양한 글꼴과 (아마도) 제한된 폭에도 불구하고 불건전 스럽습니다. 예를 들어, FireFox는 최소 글꼴 크기 옵션을 가지고 있기 때문에 그러한 설정을 방해 할 수 있습니다. – doublep

+3

"FOBUC"란 무엇입니까? – aditsu

+1

[FOUC] (http://en.wikipedia.org/wiki/Flash_of_unstyled_content) : 스타일이 지정되지 않은 내용의 플래시 – kirkaracha

0

요소 컨테이너의 고정 너비를 설정하고 padding 속성으로 재생하면이를 달성 할 수 있다고 생각합니다.

1
다소 해결의

,하지만 당신은 지난 몇 단어 잘림 방지 공백을 사용할 수 있습니다

<p>Here is some really long label that ends on&nbsp;two&nbsp;lines</p> 
+0

또 다른 유사한 접근법은 '
'과 같이 수동으로 행할 수 있습니다.'

'과 같이 매우 긴 레이블
이 있습니다. 두 줄로 끝납니다.

' –