Есть ли обходной путь CSS для одной из ошибок Firefox с сокращающимся контентом?

StackOverflow https://stackoverflow.com/questions/7309593

  •  26-10-2019
  •  | 
  •  

Вопрос

Вот скрипка с моим кодом: http://jsfiddle.net/kizu/gcahv/ (Сравните его в Firefox и в любом другом современном браузере)

Чего я хочу достичь:

  1. Должен быть встроенный блок (или, по крайней мере, блок с float) с двумя частями: слева и вправо.
  2. Эти части должны быть бок о бок и должны быть гибкими, правая часть может вообще отсутствовать.
  3. Родительский блок должен иметь немного max-width (в % или исправлено в px).
  4. Когда левая часть достаточно большая, она должна быть переполнена, но всегда должна быть показана правая часть.

С использованием inline-block, float а также overflow: hidden Я заставил его хорошо работать в последних Chrome, Safari и Opera, но поразил тот факт, что Firefox имеет ошибку: левая часть сжимается, когда правая часть длинная.

Единственный обходной путь CSS, который я обнаружил,-это попробовать элементы позиции для FX в модели Flex-Box, но это не идеально: я не мог заставить родителей иметь max-width (или же width вообще).

Вот моя лучшая попытка пока: http://jsfiddle.net/kizu/gcahv/1/

Итак, вопросы:

  1. Есть ли способ заставить Firefox понять max-width за .b-shrinker?
  2. Есть ли другой Только CSS Обходной путь для этой ошибки Firefox или совершенно другой способ сделать то, что я хочу?
Это было полезно?

Решение 2

Хорошо, так что, когда я немного играл с Flexbox, я нашел несколько хорошего решения: http://dabblet.com/gist/4701626

Единственная проблема, с которой у него возникают, заключается в том, что FX теряет эллипсис для левой части, но это небольшая проблема, потому что все остальное работает нормально.

Итак, вот код, который исправил его:

.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;   
    }

За исключением изготовления блока Flexboxy, левый блок должен иметь white-space:normal а также word-break: break-all, поэтому длительное содержание в левой части не сделает эту часть длиннее тела. И чтобы спрятать контент переполнений, есть height установлен.

Таким образом, единственная оставшаяся проблема - это отсутствующий ellipsis, поэтому, если кто -то найдет решение для этого - я был бы благодарен.

Другие советы

  1. Из того, что я читаю, FX понимает максимальную ширину из версии 1.0.https://developer.mozilla.org/en/css/max-width#browser_compatibility. Анкет Эллипс работает от FX 7.0. Так что это еще не реализовано.
  2. Дайте .b-Shrinker { max-width: 100%; width: 100% } И это будет хорошо выглядеть в FX, Webkit и Opera. http://jsfiddle.net/gcahv/11/
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top