오버플로 : 숨김 DOM 요소 뒤의 텍스트 숨기기

Question

제 질문은 간단 하긴하지만 이상적인 해결책을 찾을 수 없습니다. 오버플로 : 숨겨진 스타일을 사용하여 글리프 아이콘 (스팬에 래핑 된) 뒤에 텍스트를 숨기려고 시도하지만, 내가 원하는 방식으로 코드를 표시 할 수 없습니다.

HTML

<ul class='list-group'> 
<li class='list-group-item'> 
    <span class='fileName'> 
    This_is_my_really_long_file_name_it_just_keeps_going.txt 
    </span> 
    <span style = 'float:right'>  
    <a href="#"> 
    <span class='glyphicon glyphicon-remove'></span> 
    </a> 
    </span> 
</li>  
</ul> 

I는 glyphicon 파일 이름과 동일한 행에하고자

.list-group-item{ 
position:relative; 
overflow:hidden; 
text-overflow: ellipsis; 
white-space: nowrap;  
} 

CSS, 화면 크기 (휴대 기기) 작은 경우에, I는 싶은 오버 플로우는 list-group-item의 가장자리가 아닌 글리프 콘 가장자리에서 발생합니다. 이 바이올린에

: http://jsfiddle.net/mkabatek/7H4Cv/11/ 파일 이름 아래 glyphicon 이동, 그래서 파일 이름과 glyphicon 제거는이 바이올린에 같은 줄

에없는 : http://jsfiddle.net/mkabatek/7H4Cv/10/ 오버 플로우 포인트는리스트 그룹 아이콘을 발생합니다.

삭제 글리프콘에서 fileName의 오버플로 위치가 발생할 수 있습니까?

DOM 요소를 캡슐화 한 여러 가지 변형과 위치의 여러 조합을 시도했습니다. fileName의 절대 위치, 상대 위치, 위의 피들링의 다른 반복을 보면 내가 무엇을 시도했는지 확인할 수 있습니다. 그러나 나는 나의 목표를 성취 할 수 없었다.

이 질문이 있으시면, 저에게 답변 해주십시오. 어떤 도움을 주셔서 감사합니다!

Answer 1

실제로 그렇게 간단하지 않습니다!

이 문제를 해결하기 위해 내가 발견 한 유일한 해결책은 display:flex; 속성을 사용하는 것입니다.

Here is a JSFiddle

그것은 잘 작동하지만,이 속성이 아주 새로운이기 때문에, 당신이 목표로 모든 브라우저에서 작동하지 않을 수 있습니다. Check here the supported browsers.