OffsetWidth не соответствует ширине видимого элемента ⇐ CSS

[Anonymous]

Я столкнулся с очень запутанной проблемой при измерении ширины кнопки с помощью offsetWidth.
Я использую Vue 3 и Quasar. У меня есть q-кнопка внутри #append-слота q-поля. Я пытаюсь вычислить ширину кнопки, чтобы переместить ее вправо от поля.

Я знаю, что могу просто поместить кнопку в другой шаблон, например #after вместо #append, и мне не придется беспокоиться о вычислении ширины и перемещении кнопки в абсолютном положении. К сожалению, в моем конкретном случае это просто невозможно.
Визуально кнопка выглядит совершенно правильно, и текст, который я пытаюсь отобразить на ней, отображается в одну строку. Однако когда я измеряю ширину с помощью offsetWidth, значение неверно для меток с пробелами.



метка на кнопке
offsetWidth




привет
45 пикселей (правильно)


привет, мир
45 пикселей (неверно, должно быть больше)


helloworld
79 пикселей (правильно)



Я пробовал это со строками разной длины. Кажется, проблема в пространстве. Когда я проверяю кнопку с помощью инструментов разработчика, ширина кнопки правильная. Он просто не переносится прямо в мой код.
Я подготовил небольшой тестовый проект с CodeSandbox. Изменив метку q-btn в InputField.vue, вы можете повторить мою ошибку. Все мои журналы консоли отображают одну и ту же неправильную ширину, как показано в таблице выше.
В тестовом проекте я использовал следующий компонент, который предоставляет всю логику, необходимую для воспроизведения моей ошибки:

Код: Выделить всё

import { ref, onMounted, nextTick } from "vue";
const rightButtonRef = ref(null);
const buttonWidth = ref();
const rightButtonGap = 5;
const updateButtonWidth = async () => {
await nextTick();
if (rightButtonRef.value) {
buttonWidth.value = rightButtonRef.value.offsetWidth + rightButtonGap;
}
};
onMounted(async () => {
await nextTick();
console.log("offsetWidth:", rightButtonRef.value?.offsetWidth);
console.log("scrollWidth:", rightButtonRef.value?.scrollWidth);
console.log("scrollWidth:", rightButtonRef.value?.clientWidth);
updateButtonWidth();
});














.with-rightbutton {
--right-button-width: 45px;
> .q-field__inner {
padding-right: var(--right-button-width);
}
.q-field__counter {
padding-right: var(--right-button-width);
}
.right-button {
right: calc(-1 * var(--right-button-width));
}
}

Вещи, которые я уже проверял:

– Метка отображается внутри одиночного

– Нет видимого переноса текста (кнопка выглядит однострочной)

– Пробовал принудительно использовать пробел: nowrap;
Ожидаемое поведение:

Измеренная ширина должна отражают фактическую визуальную ширину кнопки, независимо от того, содержит ли метка пробелы.

Вот пример того, как она должна выглядеть (очевидно, между двумя словами должен быть пробел):



Я очень благодарен за любые советы, которые могу получить! Заранее благодарим за уделенное время!

Подробнее здесь: https://stackoverflow.com/questions/798 ... ment-width