Je me demande s'il existe un moyen de compter les lignes à l'intérieur d'une div, par exemple. Disons que nous avons une div comme celle-ci:
<div id="content">hello how are you?</div>
En fonction de nombreux facteurs, la div peut avoir une, deux, voire quatre lignes de texte. Y at-il un moyen pour le script de savoir?
En d'autres termes, les interruptions automatiques sont-elles représentées dans le DOM?
Si le div de taille dépend du contenu (que je suppose être le cas à partir de votre description), vous pouvez récupérer les div de la hauteur à l'aide de:
var divHeight = document.getElementById('content').offsetHeight;
Et la diviser par la police à hauteur de la ligne:
document.getElementById('content').style.lineHeight;
Ou pour obtenir la hauteur de la ligne si elle n'a pas été explicitement défini:
var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");
Vous aurez également besoin de prendre en compte le rembourrage et l'inter-espacement entre les lignes.
MODIFIER
Pleinement autonome de test, la définition explicite de la hauteur de la ligne:
<html>
<script>
function countLines() {
var divHeight = document.getElementById('content').offsetHeight;
var lineHeight = parseInt(document.getElementById('content').style.lineHeight);
var lines = divHeight / lineHeight;
alert("Lines: " + lines);
}
</script>
<body onload="countLines();">
<div id="content" style="width: 80px; line-height: 20px;">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>
</body>
</html>
Je suis convaincu qu'il est impossible maintenant. Il était, cependant.
IE7 mise en œuvre de getClientRects fait exactement ce que je veux. Ouvrez cette page dans IE8, essayez de rafraîchir il en variant la largeur de la fenêtre, et de voir comment le nombre de lignes dans le premier élément est modifié en conséquence. Voici les principales lignes de javascript à partir de cette page:
var rects = elementList[i].getClientRects();
var p = document.createElement('p');
p.appendChild(document.createTextNode('\'' + elementList[i].tagName + '\' element has ' + rects.length + ' line(s).'));
Malheureusement pour moi, Firefox renvoie toujours un rectangle client par élément, et IE8 fait la même chose maintenant. (Martin Honnen de la page fonctionne aujourd'hui, parce que IE rend dans IE compat vue, appuyez sur la touche F12 dans IE8 pour jouer avec les différents modes.)
C'est triste. Il ressemble une fois de plus, Firefox est littérale, mais inutile de mise en œuvre de la spécification gagné plus de Microsoft est utile. Ou dois-je rater une situation où de nouveaux getClientRects peut aider un développeur?
Pour ceux qui utilisent jQuery http://jsfiddle.net/EppA2/3/
function getRows(selector) {
var height = $(selector).height();
var line_height = $(selector).css('line-height');
line_height = parseFloat(line_height)
var rows = height / line_height;
return Math.round(rows);
}
Vous devriez pouvoir séparer ('\ n'). Length et obtenir les sauts de ligne.
mise à jour: cela fonctionne sur FF / Chrome mais pas sur IE.
<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
var arr = $("div").text().split('\n');
for (var i = 0; i < arr.length; i++)
$("div").after(i + '=' + arr[i] + '<br/>');
});
</script>
</head>
<body>
<div>One
Two
Three</div>
</body>
</html>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
