CODEWITHSUNDEEP
javascripttypescript
Pianoc
Pianoc

Reputation: 797

Is it possible to calculate the number of lines in a div fir a Vue3 watcher

Is it possible to find out how many lines of text there are in a div without line breaks. I want to conditionally show/hide my CTA link if it is less than or equal to the -webkit-line-clamp value or show if more:

SCRIPT:

const isExpanded = ref(true);
const information = ref(); 
const isTextTruncated = ref(false);

const toggleCta = computed(() => isExpanded.value ? 'show' : 'hide');

watch(information, () => {
  // Use watch to monitor changes in the 'information' ref
  const element = information.value;
  if (element) {
    const computedStyle = window.getComputedStyle(element);
    const lineClampValue = computedStyle.getPropertyValue('-webkit-line-clamp');
    const textLineCount = [HERE I NEED TO CALCULATE HOW MANY LINES OF TEXT ARE IN THE DIV]
    isTextTruncated.value = textLineCount > lineClampValue;
  }
});

Template:

<div ref="information" :class="isExpanded ? 'truncate' : ''">
  {{ data?.information }}
</div>
<span
  v-if="isTextTruncated"
  @click="isExpanded = !isExpanded"
>
  {{ toggleCta }}
</span>

STYLES:

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

OUTPUT:

<div class="truncated">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,
quia.
</div>

Upvotes: 0

Views: 66

Answers (1)

zakaria EL GHAYAM
zakaria EL GHAYAM

Reputation: 1

Unfortunately, there is no straightforward way to find out how many lines of text there are in a div without line breaks using JavaScript or CSS.

The -webkit-line-clamp property truncates the text to a specified number of lines, but it doesn't provide a way to get the number of lines that the text actually has.

One possible solution is to manually count the lines by counting the number of newline characters in the text. However, this approach assumes that the text is pre-formatted and does not include any additional formatting.

Another solution would be to use a more sophisticated method to measure the height of the text, such as using the Range and BoundingClientRect APIs in JavaScript. This approach can provide a more accurate count of the lines, but it can be more complex and less reliable across different browsers and platforms.

However, it is important to note that counting lines in a text box may not be the most effective solution to conditionally show/hide the CTA link based on the text truncation. The -webkit-line-clamp property can help you achieve this functionality by limiting the height of the text container, and you can use CSS to show/hide the CTA link based on the text container's height. This approach avoids the need to calculate the number of lines manually and may be more reliable across different browsers and platforms.

Upvotes: -2

Related Questions