CSS - 텍스트를 여러 줄로 배열 할 수있는 텍스트의 수직 정렬

Question

저는 HTML과 CSS에 넣으려고하는 그래픽 디자이너의 디자인을 받았습니다.

제가 직면 한 문제 중 하나는 사용자 입력 양식입니다. 디자인에서 각 입력에 대한 레이블은 고정 폭 (예 : 100px)입니다. 각 레이블/입력 쌍에 대한 컨테이너는 2em로 고정됩니다. 필자가 제시 한 디자인은 각 레이블의 텍스트가 세로로 정렬되도록 요청했습니다. 그래서 구조는 다음과 같다 :

<containerTag> 
    <label /> 
    <input /> 
</containerTag> 

한 텍스트가 한 줄에 같이 (난 그냥 컨테이너에 맞게 2EM의 라인 높이를 사용하는 것) 아니오 문제가 있지만, 라벨의 텍스트의 일부 두 개 또는 짝수 행으로 줄 바꿈됩니다.

이 문제를 해결하는 의미와 좋은 방법이 있습니까?

IE6-9, Firefox 3.5 이상, Chrome 및 Safari에서 작동하는 것이 필요합니다. 점진적 향상 기능을 사용하고 있지만 이후 브라우저에서만 작동하는 솔루션이 있지만 이전 버전 브라우저를 손상시키지 않는 솔루션이 있으면 수용 할 수 있습니다.

도움을 주신 모든 분들께 감사드립니다. 시간
S

Answer 1

당신 말은 ... 우아한 분해

감사합니다? : P

레이블의 공백 CSS 속성을 "nowrap"로 설정하십시오.