오버플로가 필요한 div가 혼동 됨

Question

div 컨테이너를 사용하여 간단한 SMS 목록보기를 설계하고 있습니다. 기본 아이디어는이 페이지를 다른 모바일 화면 크기로 작동시키는 것입니다. 부트 스트랩 같은 타사 스크립트를로드하고 싶지 않습니다.

페이지 디자인을 관리했으며 http://jsfiddle.net/my9Lt7jf/에서 사용할 수 있습니다. 그것은 좋은 것처럼 보이지만 브라우저를 더 작은 너비로 축소하면 이름과 휴대 전화 번호가있는 div 컨테이너가 줄 바꿈되어 다음 줄로 나뉩니다. 텍스트 메시지도 마찬가지입니다. 브라우저가 더 작은 너비로 줄어들 때 나는 다음 줄로 가져 가고 싶지 않습니다. 대신 텍스트를 3 개의 도트로 숨겨서 마지막에 3 개의 점이있는 한 줄에 표시 할 수 있습니다.

코드

.his_outercontainer{ 
    width:100%; 
    border:1px solid #cccccc; 
    height:50px; 
    display: table; 
} 
.his_leftcontainer{ 
    width:30px; 
    padding:3px; 
    display: table-cell; 
    vertical-align: middle; 
} 
.his_middlecontainer{ 
    padding:3px; 
    display: table-cell; 
} 
.his_rightcontainer{ 
    padding:3px; 
    display: table-cell; 
    text-align:right; 
} 
.his_mobilenumber{ 
    font-weight:bold; 
} 
.his_textmessage{ 
    overflow:hidden; 
    padding-top:3px; 
} 
.his_senttime{ 
    font-style:italic; 
} 
.his_flagindicator{ 
    padding-top:3px; 
} 

HTML 코드가 보이는 방법

<div class='his_outercontainer'> 
     <div class='his_leftcontainer'> 
      <input type='checkbox' /> 
     </div> 
     <div class='his_middlecontainer'> 
      <div class='his_mobilenumber'> 
       Ramkumar <+911234567890> 
      </div> 
      <div class='his_textmessage'> 
       Happy birthday to you Mr.John 
      </div> 
     </div> 
     <div class='his_rightcontainer'> 
      <div class='his_senttime'> 
       31st Oct 10:45 pm 
      </div> 
      <div class='his_flagindicator'> 
       <img src='green.png' /> 
      </div> 
     </div> 
    </div> 

이 같은

아래하지만 아래와 같이 어떻게해야

CSS의 0

Answer 1

이 사용하려고

.his_mobilenumber { 
    width: 153px; /* Give it a fixed width and set the overflow as below */ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 2

text-overflow: ellipsis 시도해 볼 수 있습니다. 내 정보는 MDN을 참조하십시오.

Answer 3

가 한 다음과 같은 CSS를 추가합니다 도움 :)에 사용할 수있는 좋은 사이트입니다

div { 
     text-overflow: ellipsis; 
    } 

Answer 4

.his_mobilenumber 
    { 
    width: 300px; /* you can change this to your desired width */ 
    text-overflow: ellipsis; /* any text that overflows will be replaced with a '...' at the end'. */ 
    overflow: hidden; /* this will hide anything that overflows the container */ 
    whitespace: nowrap; /* text will never wrap to the next line */ 
    } 

W3 스쿨을