단락 안에 단락을 한 줄에 넣는 방법은 무엇입니까?

Question

단락 텍스트를 div 안에 넣고 한 줄로 표시하려고합니다. 텍스트가 지정된 너비보다 길면 두 번째 줄 (div 외부)으로 이동해서는 안됩니다. CSS에서 모든 것을 시도했지만 text-overflow과 white-space을 사용했지만 성공하지 못했습니다. 내가 jQuery를 텍스트 2 개 라인을 사용하여 paragraf 일부 긴 텍스트를 넣을 경우

<li> 
    <a href="#" id="searchLink"> 

     <div id="searchDiv"> 
      <img id="searchImg" src="" /> 
      <p id="searchedProductName"> 
      </p> 
     </div> 
    </a> 
</li> 

이 (사업부의 외부 간다) 내 CSS :

#searchDiv { 
    z-index: 1000; 
    width: 600px; 
    height: 50px; 
    background-color: white; 

} 
    #searchImg { 
    width: 50px; 
    height: 50px; 
} 

#searchedProductName { 
    text-overflow: ellipsis; /* will make [...] at the end */ 
width: 370px; /* change to your preferences */ 
white-space: nowrap; /* paragraph to one line */ 
overflow:hidden; /* older browsers */ 
} 

이 내 HTML의 일부입니다

새로 업데이트 된 CSS로 줄을 표시하는 문제가 해결되었지만 paragragh는 여전히 div 외부로 이동합니다.

Answer 1

에

overflow: hidden; 

을 넣어.

#searchDiv { 
    z-index: 1000; 
    width: 600px; 
    height: 50px; 
    display:inline-block; 
} 
#searchImg { 
    width: 50px; 
    height: 50px; 
    float:left; 
} 

JS Fiddle Demo

Answer 2

컨테이너 사업부에 이미지 float:left 및 display:inline-block을 추가 SearchDiv