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

[Anonymous]

Я столкнулся с очень запутанной проблемой при измерении ширины кнопки с помощью offsetWidth.
Я использую Vue 3 и Quasar (q-btn). Визуально кнопка выглядит совершенно правильно, а текст, который я пытаюсь отобразить на ней, отображается в одну строку. Однако когда я измеряю ширину с помощью offsetWidth, значение неверно для меток с пробелами.



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




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


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


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



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

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

//I have to use absolute here





import { ref, onMounted, nextTick } from 'vue'

const buttonRef = ref(null)

onMounted(async () => {
await nextTick()
console.log('offsetWidth:', buttonRef.value?.offsetWidth)
console.log('scrollWidth:', buttonRef.value?.scrollWidth)
console.log('scrollWidth:', buttonRef.value?.clientWidth)
})

Все мои журналы консоли отображают одну и ту же неправильную ширину, как показано в таблице выше.
Вещи, которые я уже проверил:

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

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

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

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

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