CSS 인 flexbox - 컨테이너가 축소 만약 내가 쉽게 텍스트를 축소하고 줄임표로 자릅니다 텍스트와 버튼,와 인 flexbox을 렌더링 할 수

Question

CSS 그리드 (파이어 폭스 전용)에서 잘린다 텍스트 :

.titleBarCtr { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.titleBar { 
 
    color: white; 
 
    background-color: green; 
 
    flex: 1; 
 
    height: 44px; 
 
    line-height: 44px; 
 
    margin: 0; 
 
    padding-left: 5px; 
 
    text-align: left; 
 
} 
 

 
.titleBarCtr .icon { 
 
    background-color: green; 
 
    border-left: 1px solid white; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 1.17em; /*Matches h3 elems*/ 
 
    line-height: 44px; 
 
    height: 44px; 
 
    padding: 0 15px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.truncatedText { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/> 
 
<div class="titleBarCtr"> 
 
    <h3 class="titleBar truncatedText"> 
 
    Testing a long string that should be truncated 
 
    </h3> 
 
    <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a> 
 
</div>

내가 그리드의 내부에이 같은 인 flexbox 렌더링하려고하면이 여전히 크롬에서 확인 작업을 보이지만

그러나, 텍스트는 더 이상 (우분투 16.04를 사용하여 56.0.2)를 파이어 폭스에서 절단되지 않습니다 :

.root { 
 
    display: grid; 
 
    grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right]; 
 
    grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom]; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 

 
.analysisPanel { 
 
    box-shadow: 0 -2px 1px -1px rgba(0,0,0,0.2); 
 
    display: flex; 
 
    flex-flow: column; 
 
    grid-column-start: main; 
 
    grid-column-end: right; 
 
    grid-row-start: analysisPanel; 
 
    grid-row-end: bottom; 
 
} 
 

 
.titleBarCtr { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.titleBar { 
 
    color: white; 
 
    background-color: green; 
 
    flex: 1; 
 
    height: 44px; 
 
    line-height: 44px; 
 
    margin: 0; 
 
    padding-left: 5px; 
 
    text-align: left; 
 
} 
 

 
.titleBarCtr .icon { 
 
    background-color: green; 
 
    border-left: 1px solid white; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 1.17em; /*Matches h3 elems*/ 
 
    line-height: 44px; 
 
    height: 44px; 
 
    padding: 0 15px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.truncatedText { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<link href="https://use.fontawesome.com/b911bcf9e2.css" rel="stylesheet"/> 
 
<div class="root"> 
 
    <div class="analysisPanel"> 
 
    <div class="titleBarCtr"> 
 
     <h3 class="titleBar truncatedText"> 
 
      Testing a long string that should be truncated 
 
     </h3> 
 
     <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a> 
 
    </div> 
 
    </div> 
 
</div>

나는 titleBar 요소에 min-width: 0을 설정하고 행운과 flex-basis와 함께 연주 시도했습니다.

제안 사항?

Answer 1

Firefox는 max-width 세트가 필요합니다.

.analysisPanel { 
    max-width:100%;/* update */ 
} 

.root { 
 
    display: grid; 
 
    grid-template-columns: [left] 50px [controlBar] 200px [main] 3fr [toolbar] 100px [right]; 
 
    grid-template-rows: [top] 52px [subHeader] 44px [main] 2fr [analysisPanel] 1fr [bottom]; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 

 
.analysisPanel { 
 
    max-width:100%;/* update */ 
 
    box-shadow: 0 -2px 1px -1px rgba(0, 0, 0, 0.2); 
 
    display: flex; 
 
    flex-flow: column; 
 
    grid-column-start: main; 
 
    grid-column-end: right; 
 
    grid-row-start: analysisPanel; 
 
    grid-row-end: bottom; 
 
} 
 

 
.titleBarCtr { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.titleBar { 
 
    color: white; 
 
    background-color: green; 
 
    flex: 1; 
 
    height: 44px; 
 
    line-height: 44px; 
 
    margin: 0; 
 
    padding-left: 5px; 
 
    text-align: left; 
 
} 
 

 
.titleBarCtr .icon { 
 
    background-color: green; 
 
    border-left: 1px solid white; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 1.17em; 
 
    /*Matches h3 elems*/ 
 
    line-height: 44px; 
 
    height: 44px; 
 
    padding: 0 15px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.truncatedText { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="root"> 
 
    <div class="analysisPanel"> 
 
    <div class="titleBarCtr"> 
 
     <h3 class="titleBar truncatedText"> 
 
     Testing a long string that should be truncated 
 
     </h3> 
 
     <a class="icon" aria-current="false" role="button" href="#"><i class="fa fa-dashboard" aria-hidden="true" title="Load Estimation"></i></a> 
 
    </div> 
 
    </div> 
 
</div>