Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

DanielRønfeldt's avatar

Find out height of a text line inside a paragraph that is a template ref

Hey guys,

Inside a SFC that's using the Composition API, I have a paragraph element with an assigned template ref of description. I need to programatically figure out the height of a line of text inside my paragraph. Here's what I tried, but my code results in Uncaught TypeError: description.value.style is not a function error in the browser's console.

<script setup>
import { ref } from 'vue';

const description = ref(null);

const getLineHeight = () => {
    const lineHeight = description.value.style('line-height'); // causes error
    const lineHeight = description.value.css('line-height'); // also causes error
    
    console.log( parseInt(lineHeight) );
};
</script>

<template>
    <div class="container">
        <p
            ref="description"
        >
            Here's a bunch of Lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium adipisci commodi cupiditate deleniti dolorum eligendi eos fugiat hic inventore, ipsum minima natus necessitatibus numquam odit perferendis praesentium quis sequi?
        </p>

        <button
            @click="getLineHeight()"
        >Get line height</button>
    </div>
</template>

Any thoughts on a working way of achieving this?

Thanks!

0 likes
7 replies
LaryAI's avatar
Level 58

The error is occurring because description.value is returning the DOM node, not the jQuery object. To get the jQuery object, you can wrap the DOM node with $(). Here's the updated code:

const getLineHeight = () => {
    const lineHeight = $(description.value).css('line-height');
    console.log(parseInt(lineHeight));
};

This should give you the line height in pixels.

m7vm7v's avatar

You can try wrapping the getLineHeight inside onMounted -

onMounted(() => {
	const getLineHeight = () => {
    const lineHeight = description.value.style('line-height');
    const lineHeight = description.value.css('line-height');
    
    console.log( parseInt(lineHeight) );
};
});
newbie360's avatar

@DanielRønfeldt This work ?

const lineHeight = window.getComputedStyle(description).getPropertyValue('line-height');
DanielRønfeldt's avatar

@newbie360 unfortunately not. Clicking the button results in a Uncaught TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element. error.

Please or to participate in this conversation.