Para contar el número de líneas de texto dentro del elemento DOM, utilizaremos el siguiente enfoque.
- Obtenga la altura total del contenido dentro del elemento DOM.
- Obtenga la altura de una línea.
- Al dividir la altura total del contenido por la altura de una línea, obtienes el número total de líneas dentro del elemento.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Count lines </title>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<div id="content" style="width: 100%;
line-height: 20px">
hello how are you?<br>
hello how are you?<br>
hello how are you? <br>
hello how are you?<br>
</div>
<button onclick="countLines()">
Count lines
</button>
<script>
// Function to count total
// number of lines
function countLines() {
// Get element with 'content' as id
var el =
document.getElementById('content');
// Get total height of the content
var divHeight = el.offsetHeight
// object.style.lineHeight, returns
// the lineHeight property
// height of one line
var lineHeight =
parseInt(el.style.lineHeight);
var lines = divHeight / lineHeight;
alert("Lines: " + lines);
}
</script>
</body>
</html>
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por romy421kumari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA