는 CSS 전용 나는 서로 옆에 표시 할 텍스트 문자열과 숫자 ID가 가변 크기의 자른 필드

Question

의 서식 :이 String의

를 [123]

보인다 충분히 간단하지만 문자열의 길이 나 컨테이너를 배치 할 크기를 제어 할 수는 없습니다. 첫 번째 과제는 이들을 서로 옆에 배치하고 내가 찾은 트릭을 사용했습니다. :

<div> 
    <div class="display_field"> 
     <div class="label">This is a long string that should be cropped.</div> 
     <div class="id">[123]</div> 
    </div> 
</div> 

이 CSS, 나는 서로 옆에 두 개의 문자열을 얻을 :

* { font-size: 12px; } /* Just for testing. */ 

.label, .id { 
    display: table-cell; 
} 

지금은이 잘립니다 긴 문자열입니다 를 표시 할 수 있습니다.

<div style="width:125px;"> <!-- Just testing, I have no control over this guy. --> 
    <div class="cropped_field"> 
     <div class="label">This is a long string that should be cropped.</div> 
     <div class="id">[123]</div> 
    </div> 
</div> 

출력 이렇게 지금 보일 것이다 :

This is a long string [123] 
that should be 
cropped. 

최 DIV (이것은 종종)가 너무 작 으면 고정 폭이면 [123]

문제는

그리고 내가 원하는 것은 (그래서 글꼴 높이와 일치) 12 픽셀로 div의의 높이를 설정, 내가 생각할 수있는 모든 것을 시도 This is a long string [123]

이며, 오버 플로우를 숨김으로 설정하고, 본격적인 테이블을 사용하여, 심지어 플래시 사용을 고려했습니다. 나는 선택의 폭을 시험해 보았다 - 지금까지 나는이 시간에 3 ~ 4 시간을 보냈다.

저는 인터넷 검색 및 유용한 게시물 찾기를 통해 많은 도움이되는 답변을 얻었으며 가입하고 직접 질문을 시도하기로 결정했습니다.

몇 가지 (확실하지 않은이 상처 경우 또는 상황에 도움) 참고 사항 :

• 내가 ID의 값을 제어 할 수 없습니다, 그것은 수도있을 [1] 또는 [9999999] - 그 너비 (또는 "display_field"또는 "label")의 너비를 하드 코딩하고 싶지 않습니다. 심지어 백분율로 인해 문제가 발생할 수 있습니다.

• 이 환경에서는 JavaScript를 사용할 수 없습니다 jQuery 플러그인을 사용합니다!)

• 컨테이너가있을 수 있습니다. 모든 유형의 태그가 있지만 대개 DIV가됩니다. 난 정말 내 "디스플레이"필드의 외부 마크 업을 제어 할 수 없습니다. "

• 을 나는의 마크 업 제어"display_field을 "및 SPAN 태그 또는 일을 얻는 다른 HTML을 사용할 수 있습니다.

• (예, 난 당신이 IE에서 찾고 있어요) 난 단지 파이어 폭스이 쓰고 있어요 (3 필요) 및 크롬, 엉터리 브라우저와 다른 호환성은 필요하지 않습니다.

• 은 "ID"필드를 항상 대괄호로 묶인 숫자이므로 걱정할 여백이 없습니다.

• T 잘린 텍스트가 끝나는 곳에 줄임표를 넣을 필요가 없습니다. 좋은 기능이지만 FireFox에서 작동하도록 할 방법이 없습니다 (3의 해킹이 있습니다.x이지만 버전 4에는 아무 것도 없음).

Answer 1

다음은 어떻습니까? 대부분 당신이 제공 한 추출물을 기반으로합니다.

.cropped_field 
{ 
    height:1.4em; 
    overflow:hidden; 
} 

demo fiddle을 살펴보십시오.