Heim > Web-Frontend > CSS-Tutorial > Wie erkennt man mit JavaScript einen vertikalen Textüberlauf in einem DIV-Element?

Wie erkennt man mit JavaScript einen vertikalen Textüberlauf in einem DIV-Element?

Barbara Streisand
Freigeben: 2024-10-25 15:50:02
Original
690 Leute haben es durchsucht

How to Detect Vertical Text Overflow in a DIV Element using JavaScript?

Überlauferkennung in DIV-Elementen

In diesem Artikel befassen wir uns mit der Frage, wie man einen vertikalen Textüberlauf innerhalb eines DIV-Elements ermitteln kann.

CSS- und HTML-Setup

Berücksichtigen Sie den folgenden CSS- und HTML-Code:

<code class="css">div.rounded {
  background-color: #FFF;
  height: 123px;
  width: 200px;
  font-size: 11px;
  overflow: hidden;
}</code>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

Überlauf erkennen

Um festzustellen, ob der Text des DIV-Elements übergelaufen ist, kann JavaScript dies tun beschäftigt sein. Das folgende Skript vergleicht die scrollHeight des Elements mit seiner 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>
Nach dem Login kopieren

Durch die Ausführung dieses Skripts können Sie die Abmessungen des DIV-Inhalts einschließlich etwaiger Überläufe ermitteln.

Zusätzliche Ressourcen

Weitere Informationen zu diesem Thema finden Sie hier:

  • [Überlaufdokumentation](http://help.dottoro.com/ljbixkkn.php)

Das obige ist der detaillierte Inhalt vonWie erkennt man mit JavaScript einen vertikalen Textüberlauf in einem DIV-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage