Блог

Пожалуйста, взгляните на следующую упрощенную версию этой ошибки:

 .wrap {
  white-space: pre-wrap;
}  

 <div>
<input type="date" class="wrap">
</div>  

Если вы откроете этот код в Firefox Android (последняя версия), вы увидите, что высота больше, чем в Chrome.

Проблема в том, что «пробел: предварительный перенос». Я не знаю, почему это приводит к увеличению высоты. Может ли кто-нибудь объяснить мне это и возможное решение или альтернативу для этого. Кстати, я не хочу устанавливать фиксированную высоту для моего ввода.

Кажется, вы обнаружили интересную ошибку в Firefox.

A. Прежде всего, предлагаемое (!) решение

ПРОСТО: не используйте whitespace: pre-wrap to <input type="date"> или <input type="time"> . Вам все равно это не нужно… и, очевидно, разработчик браузера не ожидает, что кто-либо сделает так, чтобы такое поведение еще не было обнаружено разработчиками.

Действительно трудно представить какую-либо причину или сценарий, по которым свойство whitespace: pre-wrap необходимо было использовать для этого элемента. Дата сама по себе не переходит на следующую строку.

B. Фон (почему вы просили)

Элементы с включенной функциональностью, например date-/time-picker , имеют дополнительные скрытые внутренние элементы. Для <input type="date" обычно невидимой структуры выглядит следующим образом:

 <div id="input-box-wrapper" class="datetime-input-box-wrapper">
    <span id="edit-wrapper" class="datetime-input-edit-wrapper"></span>
    <button id="reset-button" class="datetime-reset-button"></button>
</div>

// you can see this normally hidden structure in Firefox using the developer tools
// when 'white-space: pre-wrap' is set to the element ...

  

CSS для этих элементов размещается во встроенных стилях браузера, к которым вы обычно не можете получить доступ / перезаписать с помощью css / js. Особенно это невозможно в Firefox, поскольку разработчики вообще не намерены удалять поведение даты / времени в Firefox.

Если вы не хотите использовать встроенную в браузер механику в firefox, используйте текстовое поле и добавьте расширение для выбора даты, например, с помощью jQuery. (Может быть, это и для вас обходной путь !?)

В качестве дополнительной информации здесь приведен встроенный в браузер CSS для встроенных скрытых элементов:

 // file: datetimebox.css
// you may have a look on them using Firefox dev tools as well

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");

.datetimebox {
  display: flex;
  /* TODO: Enable selection once bug 1455893 is fixed */
  user-select: none;
}

.datetime-input-box-wrapper {
  display: inline-flex;
  flex: 1;
  background-color: inherit;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
}

.datetime-input-edit-wrapper {
  overflow: hidden;
  white-space: nowrap;
  flex-grow: 1;
}

.datetime-edit-field {
  display: inline;
  text-align: center;
  padding: 1px 3px;
  border: 0;
  margin: 0;
  ime-mode: disabled;
  outline: none;
}

.datetime-edit-field:not([disabled="true"]):focus {
  background-color: Highlight;
  color: HighlightText;
  outline: none;
}

.datetime-edit-field[disabled="true"],
.datetime-edit-field[readonly="true"] {
  user-select: none;
}

.datetime-reset-button {
  color: inherit;
  fill: currentColor;
  opacity: .5;
  background-color: transparent;
  border: none;
  flex: none;
  padding-inline: 2px;
}

svg|svg.datetime-reset-button-svg {
  pointer-events: none;
}

  

Объединение всех вместе:

Реальная проблема — интегрированный элемент .datetime-reset-button . Докажите это самостоятельно: используя white-space: pre-wrap для input let ‘grow’ этот элемент обертки кнопки сброса до заданной высоты. Если вы теперь добавите display: none (в Firefox direct) в интегрированный стиль браузера к этому элементу, поведение input элемента будет удалено, а размер input изменений вернется к нормальному состоянию.

Итак, — white-space: pre-wrap изменяет поведение поля и сохраняет место для последовательностей пробелов (подробнее: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space ). Нормальное поведение заключается в том, что свойство display: inline-flex родительского элемента контейнера reset-button позволяет контейнеру перемещаться в строке и переходить к следующей строке. Если вы установите white-space: wrap , вы увидите кнопку в следующей строке под полем ввода. (Видя, что это тоже ошибка.) Но с pre-wrap потоком больше невозможно, и кнопка нажата в поле… и позвольте ему расти выше.

При использовании white-space: pre-wrap Safari сохраняются последовательности пробелов.

Самое простое решение:

 .wrap {
  white-space: none;
  white-space: -moz-none;
}
  

Я рекомендую вам проверить CSS-трюки.

 <div> <--linebreak
>whitespace<.innerHTML <-- linebreak
</div>
  

Эти разрывы строк и пробелы заставляют ваш элемент растягиваться, потому что вы сохранили их в .innerHTML с помощью {пробел: pre;}

 <div>.innerHTML</div>
-or-
elem.innerHTML = elem.innerHTML.trim()
  

Исправлена проблема для элементов с </закрывающим тегом>

Однако,

 <input type="date" id="wrap" value='2021-12-06'>
  

не имеет .innerHTML или закрывающего тега. Его значение не имеет пробелов.

отображаемое содержимое элемента, не отраженное в инспекторе, обрезается правилом {max-height: 20px}

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