2011-04-27 3 views
0

레이블에 특정 너비가 있으며 지정된 너비 이상으로 렌더링해야 할 때 클립으로 표시하고 ...으로 표시하는 기능이 HTML에 있습니다. 툴팁에는 실제 실제 이름이 표시됩니다. 이 같은HTML은 폭에 대한 라벨을 자르지 않습니까?

뭔가 :

enter image description here

답변

3

text-overflow:ellipsisoverflow:hidden CSS 스타일을보십시오. 함께 사용하거나 텍스트 오버플로가 무시됩니다.

텍스트 오버플로가 모든 브라우저 (특히 IE)에서 지원되지 않을 수 있으므로 테스트를 잘 수행하십시오. 레이블 텍스트를 클립하는

+1

[현재 브라우저 지원 (http://maettig.com/code/css/text-overflow-ellipsis.html) – pintxo

+0

@cmmi, 좋은! +1 –

0

http://jsfiddle.net/jwB2Y/123/

하나의 옵션은 오버 플로우 및 공백 속성과 함께 최대 폭 속성을 설정합니다. 표시하려면 ... 텍스트 오버플로 : 줄임표를 사용해야합니다.

.inline-label { 
    white-space: nowrap; 
    max-width: 150px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    float:left;  
    } 

.

<div> 
    <label for="id1" class="inline-label">This is the dummy text i want to display::</label> 
    <input type="text" id="id1"/> 
</div>