Label, Button 또는 TextArea를 한 줄로 유지하려면 어떻게합니까?

Question

일부 텍스트가 포함 된 Label, Button 또는 TextArea 개체가 있다고 가정 해 보겠습니다. 기본적으로 이러한 작업을 수행하는 방식은 이러한 개체에 텍스트를 넣으면 자동으로 다음 줄로 바뀝니다. 이것을 사용 중지하는 방법이 있습니까? CSS 속성이

overflow : hidden ; 

으로 표시되면 스크롤바가 나타나지 않습니다. 그러나 텍스트가 다음 줄로가는 것을 막을 수있는 방법이 있습니까?

내 안에있는 개체보다 "넓은"문자열이 있으면 그 문자열을 배치하지 않고 개체에 포함 할 수있는 한도까지 문자열을 쓰는 것이 좋겠다. 다음 줄로? 누구든지이 일을 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

는이 작업을 달성하기 위해 다음과 같은 CSS 정의를 사용할 수 있습니다

<style type="text/css"> 

.element { 
     width:200px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     -o-text-overflow: ellipsis; 
     white-space: nowrap;   
} 

</style> 

<div class="element"> 
This text will not wrap. Hamina hamina hamina hamina hamina. 
</div> 

이 다음 행으로 포장에서 텍스트를 방지해야한다. 텍스트가 요소의 너비를 초과하면 잘라냅니다. 웹킷/익스플로러를 사용하고 있다면, 텍스트가 잘리는 곳에서 멋진 줄임표 효과를 볼 수 있습니다 (보이는 것보다 더 많은 텍스트가 있음을 암시하기 위해).

불행히도 파이어 폭스는 줄임표를 지원하지 않습니다. 그러나 텍스트는 여전히 잘리고 랩핑되지는 않을 것입니다.

버튼이나 텍스트 영역 요소가있는이 정의는 테스트하지 않았습니다. div 만 사용해야합니다. 그러나 나는 그것이 작동해서는 안된다. 나는 너에게 실험을 떠난다.