Esta es la solución más válida que te podemos compartir, sin embargo mírala detenidamente y valora si se puede adaptar a tu proyecto.
Solución:
Aquí hay un método usando inline-block para la izquierda y el medio y position:absolute para el elemento correcto.
jsviolín
HTML
leftSome really long text in the center. Some really long text in the center.
right
CSS
html, body
margin: 0px;
padding: 0px;
#parent
background-color: #eee;
height: 48px;
position:relative;
overflow:hidden;
white-space: nowrap;
#colLeft
background-color: #ff8b8b;
height: 48px;
display: inline-block;
#colCenter
background-color: orange;
height: 48px;
display: inline-block;
overflow: hidden;
#colRight
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
position:absolute;
top:0;
right:0;
Ya que se basa en inline-blockhay un comentario entre el
desbordamiento de texto: puntos suspensivos
Para lograr esto al usar text-overflow:ellipsis es posible que deba recurrir a JavaScript, aquí hay una posible solución (jsFiddle).
window.onresize = updateDimensions;
function updateDimensions()
var parent = document.getElementById('parent');
var left = document.getElementById('colLeft');
var right = document.getElementById('colRight');
var middle = document.getElementById('colCenter');
middle.style.width = (parent.offsetWidth - right.offsetWidth - left.offsetWidth) + 'px';
Si está abierto a algunos cambios de HTML, esto debería darle exactamente lo que desea:
left
right
Some really long text in the center. Some really long text in the center.
y css para ser:
html, body
margin: 0px;
padding: 0px;
#parent
background-color: #eee;
height: 48px;
#colLeft
background-color: #ff8b8b;
height: 48px;
float: left;
#colwrap
overflow:hidden;
background-color: orange;
#colCenter
height: 48px;
#colRight
background-color: #c3d0ff;
height: 48px;
float: right;
jsFiddle: http://jsfiddle.net/gajbhiye/ZX97K/ Espero que ayude.
Engañe al navegador diciendo que todo encaja bien en una sola línea agregando algunos márgenes grandes a los elementos del centro y la derecha, y compénselo con un posicionamiento relativo. Ver violín actualizado.
Marcado: permanece intacto.
Estilo:
#parent
background-color: #eee;
height: 48px;
overflow: hidden;
#colLeft
background-color: #ff8b8b;
height: 48px;
float: left;
#colCenter
background-color: orange;
height: 48px;
float: left;
margin-left: -2000px;
position: relative;
left: 2000px;
#colRight
background-color: #c3d0ff;
height: 48px;
float: right;
margin-right: -2000px;
position: relative;
left: -2000px;
Te invitamos a confirmar nuestro ensayo ejecutando un comentario o dejando una puntuación te lo agradecemos.