Comment détecter le débordement de texte vertical dans un élément DIV à l'aide de JavaScript ?

Détection de débordement dans les éléments DIV

Dans cet article, nous abordons la question de savoir comment déterminer le débordement vertical de texte dans un élément DIV.

Configuration CSS et HTML

Considérez le code CSS et HTML suivant :

<code class="css">div.rounded {
  background-color: #FFF;
  height: 123px;
  width: 200px;
  font-size: 11px;
  overflow: hidden;
}</code>

<code class="html"><div id="tempDiv" class="rounded">
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Phasellus vel quam vestibulum orci blandit laoreet.
</div></code>

Détection du débordement

Pour vérifier si le texte de l'élément DIV a débordé, JavaScript peut être employé. Le script suivant compare la scrollHeight de l'élément avec sa clientHeight :

<code class="javascript">function GetContainerSize() {
  var container = document.getElementById("tempDiv");
  var message =
    "The width of the contents with padding: " +
    container.scrollWidth +
    "px.\n";
  message +=
    "The height of the contents with padding: " +
    container.scrollHeight +
    "px.\n";

  alert(message);
}</code>

En exécutant ce script, vous pouvez obtenir les dimensions du contenu de la DIV, y compris tout débordement.

Ressources supplémentaires

Pour plus d'informations sur ce sujet, reportez-vous à ce qui suit :

• [Documentation de débordement](http://help.dottoro.com/ljbixkkn.php)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!