Word, Character, and Line Count in Text Area Using HTML, CSS, and JS

max-lines

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow . In fact, both properties make up the line-clamp property, which is a shorthand for combining them. It’s worth noting at this point that the spec that introduces max-lines is currently in Editor’s Draft, so everything we’re talking about here is subject to change since it is a work in progress. The spec even notes that this property is at risk of being dropped during candidate recommendation. That said, the spec is also quick to note that does not mean the idea may simply be deferred and could pop up in another draft period.

• none : No maximum number of lines is set and all content will render.
• : The number of lines before content is discarded. Only positive integers are accepted. Negative values will be discarded and cause the property to be ignored.

The spec notes that the property’s integer value can be animated. While we do not have a demo because of a lack of browser support, that could be an interesting way to create an effect of hiding or revealing more content with user interactions.

The Limiting Visible Lines Property

The spec describes the max-lines as “limiting visible lines” and that’s because the content that falls within the maximum number of lines is left in view while the rest is “neither rendered nor measured.” In other words, the content that falls outside the maximum number lines is never rendered by the browser at all, similar to the content being set to display: none; .

The spec goes on to describe the content that gets chopped by max-lines as fragments: one fragment that is rendered in view and another fragment that is not rendered and out of view. What follows from there could feel like the plot of the Matrix because the box that contains the content becomes a “fragmentation container” which captures and stores that fragmented piece (now known as a max-lines on a column and that column has another column next to it that is part of the same article, then the content that is leftover from the first column can flow right into the next one.

None at the moment, but you can get some support using the WebKit’s proprietary implementation of line-clamp :

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Источник

Css text line count

Last updated: Jun 7, 2023
Reading time · 5 min

# Table of Contents

# How to Limit text length to N lines using CSS

You can use the line-clamp CSS property to limit the length of a text to N lines with CSS.

The line-clamp property limits the contents of a block to the specified number of lines.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> body  margin: 100px; > .message  overflow: hidden; display: -webkit-box; /* display 2 lines only */ -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; width: 600px; border: 1px solid black; > style> head> body> div class="message"> bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com div> body> html> 

Make sure to adjust the value of the line-clamp CSS property depending on how many lines you want to limit the text to.

Copied! 
.message  overflow: hidden; display: -webkit-box; /* display 2 lines only */ -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; width: 600px; border: 1px solid black; > 

The line-clamp CSS property enables you to limit the contents of a block to the specified number of lines (2 lines in the example).

Note that the line-clamp CSS property only works when the display CSS property is set to -webkit-box .

If you remove the display of -webkit-box , the example won’t work.

We also set the overflow property to hidden .

Источник

CSS max-lines Property

The CSS max-lines property is used to limit a block content to a maximum number of lines before being cropped out.

The max-lines property can create a clamping effect with the block-overflow property.

Let’s remember that the line-clamp property is a shorthand for the max-lines and the block-overflow properties.

The max-lines property is not currently supported by all browsers, but you can get support using the WebKit’s proprietary implementation of the line-clamp property.

The max-lines property is also called «limiting visible lines», because the content falling within the maximum number of lines isn’t rendered by the browser. Let’s discuss the content that is cut into fragments by the CSS max-lines property. Here we have two fragments: one rendered in view and another one that is not rendered and is out of view. As a result, the box containing the current content captures the fragmented part, passing it to another box which belongs to a CSS Region.

Initial Value	none
Applies to	Fragment boxes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.maxLines = «2»;

Syntax

max-lines: none | | initial | inherit;

Example of the max-lines property:

html> html> head> title>Title of the document title> style> p < overflow: hidden; box-sizing: content-box; width: 300px; font-size: 16px; line-height: 24px; font-family: Helvetica, sans-serif; max-lines: 3; > style> head> body> h2>Max-lines property example h2> p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p> body> html>

Values

Value	Description
none	No maximum number of lines is specified.
	Sets the number of lines before content is discarded. Negative values are invalid.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Источник

How to limit text to n lines with CSS?

Sometimes, we have to trim text to limit the number of lines. There are a few ways to do it with pure CSS. Let’s learn how to achieve that

The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time. On my blog, I’m using line-clamp in all post-type components to ensure that it will have the same height as siblings.

One-line truncation

To truncate only one line we can use:

.truncate  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; >

White-space and overflow will do the job, while text-overflow will add three dots at the end of the line.

Multiple lines truncation

The easiest way is to use this snippet:

.truncate  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; >

We are using multiple CSS properties:

• overflow: hidden;
• text-overflow: ellipsis; — optional, it will add three dots at the end of the trimmed line
• display: -webkit-box;
• -webkit-line-clamp: 2; — here we can specify how many lines we want to show to the user
• line-clamp: 2;
• -webkit-box-orient: vertical;

Browser Support

According to Can I Use line-clamp truncation is supported by all major browsers except IE11 and Opera Mini.

IE-11 Support

To support IE 11, we can use max-height instead of line-clamp .

.truncate  display: block; max-height: 3.6em; line-height: 1.8em; >

The line-height is set to 1,8em and max-height to 3,6em. Max lines are calculated in this way: 3,6em divided by 1,8em equals 2 lines.

Codepen demo to play with:

See more solutions!

Extra space below image

One of the most common problems that almost every junior frontend developer has is extra space below the image. Let’s learn how to fix it with CSS

How to create a tooltip in HTML and CSS?

A short tutorial on creating an HTML and CSS tooltip without a single line of javascript. All you need to know is data-atributes

Источник

Word, Character, and Line Count in Text Area Using HTML, CSS, and JS

Sumit Dey Sarkar

11 Apr 2023

JavaScript

Word, Character, and Line Count in Text Area Using HTML, CSS, and JS

In this tutorial we will learn word, character, and line count in text area using HTML, CSS, and JS.

Word, Character, and Line Count in Text Area Using HTML, CSS, and JS

     textarea 
Total Word Count: 0
 
Total Character Count: 0
 
Total Line Count: 0
   

Here, the input event is used to check value when a user types into the textarea. The event listener updates the word count, character count, and line count based on the current value of the text area. The regular expressions /\S+/g and /\r?\n/ are used to split the text into words and lines, respectively.

Keep that in mind , this code only coungt the words, characters, and lines in the text that is now visible in the text box (text area). If the user scrolls down or expands the text area to show more text, the counts will not automatically update.

Related Posts

Categories

php

javascript

html

laravel

mysql

jquery

css

git

bootstrap

vue

android

python

server

Latest Posts

Popular Tools

Popular Code Snippets

Coursera, Codeacademy, Udacity, W3Schools, Udemy, Alison, TheNewBoston, edX, P.S.Codewars,Freecodecamp, Managing technical debt blog, Scrimba, Codepen, Codepen/challenges, The Odin Project, htmlreference.​io, cssreference.​io, Frontend Mentor, Dev Challenges, MDN, Code Mentor, Coding Dojo, CSS Battle, Codier, Ace Frontend, Can I Use, CSS Tricks, 30 Seconds of Code,tutorialspoint, Neumorphism, Shaddows Brumm, Fancy Border Radius, Glow Generator, Clothoid Corners, Glassmorphism, Clipy, CSS Filters, Base64 Image, Quantity Queries, Animations, Cubic-Bezier, Keyframes, Wait Animate, Transition.Style, graphic design, web design, website design, website builder, web developer, web designer, webdesign, ecommerce website, web design company, website creator, website designer, responsive web design, web development company, best website design, web design software, web page design, build a website, web developer salary, design website, web design courses, how to design a website, web design inspiration, website layout, web designer salary, web application development, ecommerce website design, web agency, software development company, web design tutorial, web programming, design company, website design templates, what is web designing, web developer jobs, website developer, web design agency, freelance web developer, web design services, freelance web designer, graphic design websites, web solutions, ecommerce website development, free website design, web development courses, webdev, web developers, web development tools, website design services, developpeur web, web design london, website design ideas, web designing and programming, design a website, web design and development, web dev, web development services, homepage design, best designed websites, cheap website design, learn web design, web design templates, web design tools, web design jobs, website design inspiration, web design india, flash website, website developers, designer websites, website services, website design cost, good website design, site design, simple website design, cool website designs, modern website design, graphic designer websites, webcode, best web design software, website making, free web design software, mobile website design, learn web development, front end web developer, how to become a web developer, web developer portfolio, web development company in india, python web development, web development tutorial, website company, website design and development, web company, webdesigning, professional website design, affordable web design, best web design company, creative web design, top website designs, website design pricing, web developer tools, how to develop a website

Источник