CSS는 가변 내용 및 창 너비로 부동 상태로 유지됩니다.

Question

가변 창 크기와 3 개의 부동 블록이있는 헤더가 있습니다. 첫 번째는 고정 너비로 ​​오른쪽으로 플로팅되며, 두 번째는 고정 너비로 ​​왼쪽으로 플로팅됩니다. 마지막 (varleft)은 가변 길이 콘텐츠가있는 왼쪽으로 떠 있습니다. 그것의 폭 성장하면서

<div id="header"> 
    <div id="right">test</div> 
    <div id="left">test</div> 
    <div id="varleft">very long text very long text very long text very long text very long text very long text very long text very long text very long text </div> 
</div> 

내가 다른 블록에서가는이 세 번째 블록을 방지하려면, 또한, 나는 그것을 오래 콘텐츠에 대한 두 번째 라인을 제공하고 줄임표로 문자열을 잘라야합니다. 나는 다른 사용하지만 그들을 이동 수레 할 수 있도록

이 블록은 부트 스트랩 탐색 헤더의 블록이다.

이

성장 텍스트에 대한 텍스트의 예는 다음과 같습니다 https://jsfiddle.net/o90sm39L/

Answer 1

은 그냥 CSS에 추가 : https://jsfiddle.net/mjq2tum0/

이 내가 원하는 결과가 (고정 폭과 한 줄 생략에 대한 제외)

#varleft { 
    max-width: calc(100% - 306px); 
} 

Answer 2

나는 나는 게다가, 그것의 폭 성장하면서 다른 블록에서가는이 세 번째 블록을 방지 할 긴 내용에 대해서는 두 번째 줄을 제공하고 줄임표로 줄을 자릅니다. 여기

용액이다. 일반 배경색이있는 경우에만 작동합니다. 당신을 위해 문제가 아니라면 this awesome article

에서 영감을보다 더

코드 :

1 내가 사용하는 것이 더 실용적 찾기가 box-sizing: border-box; :

#header > * { 
    box-sizing: border-box; 
} 

2 div의 너비 변경 varleft :

width: calc(100% - 300px); // 100% minus the width of #right and #left 

(10)는 지금, 당신의 사업부 varleft는

3.는 varleft에 위치와 오버 플로우를 추가 다른 블록에서 이동하지 않습니다

overflow: hidden; 
    position: relative; 

4.줄임표 ...를 생성하고 숨길 사업부를 만들 사용 의사 요소 ...하지 필요한 경우 여기

#varleft:before { 
    content: '...'; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 
#varleft:after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1em; 
    height: 40px; 
    background: white; 
} 

은 조각이다 :

$(function(){ 
 
    var ranchr = "A BCDE FGHI JKLMN OPQRS TUVWX YZabcd efghijklm nopqr stuvwx yz"; 
 
\t setInterval(function(){ 
 
    if($("#varleft").text().length>100) 
 
     $("#varleft").text(""); 
 
    \t $("#varleft").append(ranchr.charAt(Math.floor(Math.random() * ranchr.length))); 
 
    },100); 
 
});

#header{ 
 
    border: 1px solid #000; 
 
    height: 42px; 
 
    width: 100%; 
 
    background: white; 
 
} 
 
#header > * { 
 
    box-sizing: border-box; 
 
} 
 
#right{ 
 
    border: 1px solid #f00; 
 
    float: right; 
 
    width: 150px; 
 
    height: 40px; 
 
} 
 
#left{ 
 
    border: 1px solid #0f0; 
 
    float: left; 
 
    width: 150px; 
 
    height: 40px; 
 
} 
 
#varleft{ 
 
    border: 1px solid #00f; 
 
    float: left; 
 
    width: calc(100% - 300px); 
 
    height: 40px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#varleft:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
#varleft:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 1em; 
 
    height: 40px; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
<div id="right">test</div> 
 
<div id="left">test</div> 
 
<div id="varleft"></div> 
 
</div>