Esiste una soluzione alternativa CSS per uno dei' bug di Firefox con restringimento contenuti?
Domanda
Ecco un violino con il mio codice: http://jsfiddle.net/kizu/GCahV/ (confrontarlo in Firefox e ogni altro browser moderno)
Quello che voglio ottenere:
- Ci deve essere un blocco di linea (o almeno un blocco con
float
) con due parti:. A sinistra ea destra - queste parti devono essere side-by-side e deve essere flessibile, parte destra può essere assente affatto.
- Il blocco genitore deve avere qualche
max-width
(in%
o fisso inpx
). - Quando la parte sinistra è abbastanza grande, deve essere overflowen, ma la parte destra deve essere sempre indicata.
Utilizzando inline-block
, float
e overflow: hidden
ho fatta lavorare bene nella sua ultima Chrome, Safari e Opera, ma ha colpito con il fatto che Firefox ha un bug:. Gli strizzacervelli parte sinistra quando la parte destra è lungo
L'unica soluzione alternativa CSS che ho trovato è di provare gli elementi di posizione per Fx nel modello flex-box, ma non è perfetto. Non ho potuto fare il genitore di avere max-width
(o width
affatto)
Qui è il mio miglior prova finora: http://jsfiddle.net/kizu/GCahV/1 /
Quindi, le domande sono:
- C'è un modo per rendere Firefox capire
max-width
per.b-shrinker
? - C'è un altro CSS solo per aggirare il baco questo Firefox' o un modo completamente diverso di fare ciò che voglio?
Soluzione 2
Ok, so with playing with the flexbox a bit I found a somewhat nice solution: http://dabblet.com/gist/4701626
The only problem it have is that Fx loses the ellipsis for the left part, but it's a minor problem, 'cause everything else works fine.
So, here is a code that fixed it:
.b-wrapper_fixed .b-shrinker__in {
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-direction : reverse;
}
.b-wrapper_fixed .b-shrinker__left {
white-space: normal;
word-break: break-all;
-moz-box-flex: 1;
height: 1.2em;
}
.b-wrapper_fixed .b-shrinker__right {
-moz-box-flex: 1;
}
Except for making the block flexboxy, the left block need to have white-space:normal
and word-break: break-all
, so the long content in the left part won't make this part longer than the body. And to make the overflown content to be hidden, there is height
set.
So, the only problem left is the missing ellipsis, so if someone would find a solution for this — I'd be grateful.
Altri suggerimenti
- From what I read, Fx understands max-width from version 1.0 on. https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility. The ellipse works from Fx 7.0 on. So it is not implemented yet.
- Give .b-shrinker
{ max-width: 100%; width: 100% }
and it will look good in Fx and WebKit and Opera. http://jsfiddle.net/GCahV/11/