Count the number of lines inside a text 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

Count the number of lines inside a text

A CSS-only solution to count the lines of text

• Previous CSS Tip
• Next CSS Tip

Count the number of lines inside a text

July 29, 2024

By adjusting the code of the previous tip (getting the width/height of any element) we can do some intresting counting. For example, we can count the number of lines inside a text.

@property --_y {  syntax: "<number>";  inherits: true;  initial-value: 0; }@property --h {  syntax: "<integer>";  inherits: true;  initial-value: 0; }body {  timeline-scope: --cy;}/* the text container  */.container {  overflow: auto;  position: relative;}.container:before {  content:"";  position: absolute;  left: 0;  top: 0;  height: 1lh; /* instead of 1px we use 1lh (the height of a line box) */  view-timeline: --cy block;}/* the element that will show the count */.count {  --h:calc(1/(1 - var(--_y)));  animation: y 1s linear;  animation-timeline: --cy;  animation-range: entry 100% exit 100%;}.count:before {  content: counter(h);  counter-reset: h var(--h);}@keyframes y {to{--_y:1}}

Here is a static demo:

See Counting the number of lines inside a text by t_afif on CodePen.

Here is a version where you can edit the content. The number of lines will adjust based on the content you will enter.

See Dynamic line counting by t_afif on CodePen.

More detail

How to Get the Width/Height of Any Element in Only CSS

---

Unlike JavaScript, there is no simple built-in method in CSS to access an element's width and height. But using some (call it hacky) modern CSS techniques, we can get our hands on the number and even use it.

---

More CSS Tips

• A CSS generator for wavy circle shapes Use modern CSS to create a wavy circle shape in no time. August 13, 2024

Arc shape with rounded edges

---

a few lines of modern CSS to create an arc shape with rounded edges

• Calculate the scroll progress of an arbitrary element A few lines of CSS to get the scroll progress of any element in the page. July 24, 2024
• Calculate the scroll progress of the page A few lines of CSS to get the scroll progress of the page inside a CSS variable. July 23, 2024

Count the number of lines inside a text

---

A CSS-only solution to count the lines of text