Является ли реализация Firefox переполнения текста и встроенного блока неправильной? - PullRequest
Новая
       10

Является ли реализация Firefox переполнения текста и встроенного блока неправильной?

5 голосов
/ 15 апреля 2019

Как я понимаю, переполнение текста применяется только к встроенным элементам :

Это свойство определяет рендеринг, когда встроенное содержимое переполняет край строки строки в направлении встроенной последовательности его элемента контейнера блока («блока»), переполнение которого отличается от видимого.

Firefox (протестирован на 66.0.2 64-битных, macOS - и, возможно, других браузерах Gecko) не должен быть многоточием inline-block тогда, и, кроме того, это происходит странным образом: он уменьшает весь встроенный блок в «…». Смотрите фрагмент кода ниже для демонстрации.

Что-то я упустил в спецификациях или Гекко ошибся в этом вопросе?

Мой вопрос относится к этим спецификациям: 

.wrapper {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  height: 40px;
  border: 1px solid lightgray;
  position: relative;
}

.wrapper div {
  display: inline-block;
  vertical-align: middle;
}

.wrapper img {
  vertical-align: middle;
}

.block {
  width: 40px;
  height: 40px;
  background: red;
}
<small>⚠️ Case 0 : ellipsis, preceding inline-block and contained text in inline-block</small>
<div class="wrapper">
  <div class="block"></div>
  <div>I'm not concerned by ellipsis for now.</div>
</div>

<font color="firefox, damn">❌ Case 1 : ellipsis, preceding inline-block and overflowing text in inline-block</font>
<div class="wrapper">
  <div class="block"></div>
  <div>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</div>
</div>

<small>✅ Case 2 : ellipsis, no preceding block and overflowing text in inline-block</small>
<div class="wrapper">
  <div>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</div>
</div>


<small>✅ Case 3 : ellipsis, no preceding block and overflowing text in a span (inlined by default)</small>
<div class="wrapper">
  <img src="https://placekitten.com/40/40">
  <span>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</span>
</div>

<small>✅ Case 4 : ellipsis, span all over the place and overflowing second text</small>
<div class="wrapper">
  <span>I'm a first text.</span>
  <span>I'm a text so long I'll overflow for sure, cause there is no space for me in this world, I'm doomed and you know it well. Why would you even wrap me in a div? A div? Do you hate me?</span>
</div>

1 Ответ

3 голосов
/ 15 апреля 2019

Поведение Firefox кажется идеальным, соответствует Chrome V75 и соответствует этому параграфу спецификации:

Для реализаций значения эллипса необходимо скрывать символы и атомарные элементы на уровне строки вконцевой край линии по мере необходимости, чтобы соответствовать многоточию, и поместите многоточие непосредственно рядом с концевым краем оставшегося встроенного содержимого.Первый символ или элементарный элемент на уровне строки в строке должен быть обрезан, а не закруглен.

Таким образом, дочерние элементы div для оболочки div имеют значение display:inline-block, что означает, что они атомарныевстроенные ящики .Когда есть предшествующий элемент div, тогда длинный текст отсутствует в элементарном элементарном уровне first , поэтому его можно эллипсировать, а в абзаце требуется, чтобы весь блок атомарного уровня inline был эллиптическим.

...