CSS 텍스트 플로트 aligment

Question

여기

는

이미지보기 ... 그것은 자기 설명이다, 내 문제 : 자바 스크립트를 사용하지 않고,

내가 원하는을하는 경우 .elements의 텍스트 (마지막에 html보기)가 너무 길어서 회색 영역의 두 줄에 구분됩니다.

"Hello world! Hello StackOverFlow!" 분리되어야하는 텍스트입니다.

도움을 주셔서 감사합니다. 당신이 뭔가 누락, 또는 내가 충분히 자신을 설명하지 않았다고 생각하는 경우

, 그냥 당신이 알고 싶은 당신을 제공하기 위해 최선을 다할 것입니다 문의 **)

HTML

<div class="filter"> 
    <div class="left"></div> 
    <div class="center"> 
     <div class="arrow">Search Filter Research Text Test</div> 
     <div class="head"></div> 
     <div class="element"><div>Hello World! Hello StackOverFlow!</div></div> 
    </div> 
    <div class="right"></div> 
</div> 

.element에 다음 CSS를 추가

CSS

.table .filter { 
    height: 44px; 
    position: relative; 
} 


.table .filter div { 
    height: 44px; 
} 

.table .filter .left { 
    width: 7px; 
    position: absolute; 
    left: 0; 
    background: url('../images/Tableau/filtre/gauche.png') no-repeat; 
} 

.table .filter .right { 
    width: 7px; 
    position: absolute; 
    right: 0; 
    background: url('../images/Tableau/filtre/droit.png') no-repeat; 
} 

.table .filter .center { 
    background: transparent url('../images/Tableau/filtre/centre.png') repeat-x; 
    left: 7px; 
    right: 7px; 
    position: absolute; 
} 

.table .filter .center>div { 
    float: left; 
} 

.table .filter .center .arrow { 
    background: url('../images/Tableau/filtre/fleche-centre.png') repeat-x; 

} 

.table .filter .center .head { 
    width: 13px; 
    background: url('../images/Tableau/filtre/fleche.png') no-repeat; 
} 

.table .filter .center .element { 
    text-align: center; 
    margin: auto; 
} 

.table .filter .center .element>div { 
    width: 100%; 
    text-align: center; 
} 

Answer 1

은 높이 조정이 필요하지만 이것이 당신이 찾고있는 행동으로 나타납니다이 바이올린을

http://jsfiddle.net/XkgA7/21/

을보십시오.

Answer 2

시도 :

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 

이렇게하면 텍스트가 너무 길어서 컨테이너에 들어 가지 않을 수 있습니다.

그러나 이것이 실패하면 CSS의 다른 곳에 문제가있어 컨테이너 자체가 너무 크게 만들어집니다. 이것은 element>div의 width: 100% 때문에 거의 확실합니다. 그것을 제거하십시오.