Anzahl Zeilen eines Texts auslesen

[Fragipani]

Hallo,

ist es möglich die Anzahl der Zeilen zu ermitteln, ohne dass man selbst Umbrüche setzt?
Ich habe einen dynamischen Text, der von der Länge variiert und deshalb manchmal einen Umbruch erzeugt und manchmal nicht. Wenn ein Umruch erzeugt wird, möchte ich 'line-height' anpassen.

Beispiel:
Ohne Umbruch ist line-height: 24px
Mit Umbruch ist line-height: 12px

Somit ist die Höhe immer 24px. Der Text wird nie so lang, als dass mehr als ein Umbruch entsteht.

Habe auch schon mal versucht, das mit der Anzahl der Zeichen zu lösen. Das klappte aber nicht immer, da verschiedene Zeichen unterschiedlich breit sind...

Es muss auch nicht mit Javascript sein. PHP-Lösungen sind auch gerne gesehen :)

Gruss Fragipani

[LX]

Mit PHP funktioniert das leider nicht zuverlässig, da verschiedene Font-Renderer unterschiedlicher Browser zu abweichenden Ergebnissen kommen können - wenn Du doch PHP nehmen willst, bleibt Dir lediglich die Möglichkeit, die Texte als Grafiken automatisch per GD zu generieren und einzubinden. Ein Tip: offsetHeight zeigt Dir die Höhe eines Objekts an: wenn es zu hoch ist, kannst Du per JavaScript einen zusätzlichen Klassennamen vergeben.

Gruß, LX

[Peter Pan]

Hi!

Mit PHP funktioniert das leider nicht zuverlässig, da verschiedene Font-Renderer unterschiedlicher Browser zu abweichenden Ergebnissen kommen können - wenn Du doch PHP nehmen willst, bleibt Dir lediglich die Möglichkeit, die Texte als Grafiken automatisch per GD zu generieren und einzubinden. Ein Tip: offsetHeight zeigt Dir die Höhe eines Objekts an: wenn es zu hoch ist, kannst Du per JavaScript einen zusätzlichen Klassennamen vergeben.

Wäre ich jetzt der OP, dächte ich nicht nur:

"Doofe Frage, doofe Antwort - klar!",

sondern auch:

"Ver*en kann ich mich alleine!"

off:PP

[molily]

Wäre ich jetzt der OP, dächte ich nicht nur:

"Doofe Frage, doofe Antwort - klar!",

sondern auch:

"Ver*en kann ich mich alleine!"

Wieso? Das verstehe ich jetzt nicht.
Inwiefern ging LXs Antwort an der Frage vorbei?

Mathias

[Fragipani]

Hab ich mich auch gewundert... Ich fands eigentlich sehr hilfreich. Ich möchte das Element verikal zentrieren. Hab das auch mit einer anderen Variante versucht, was mir allerdings nur Probleme mit dem IE verursachte.

Jett hab ich das per Javascript und offsetHeight "gelöst". Auf der Seite ist JS Pflicht (was ich zwar nicht sonderlich gut finde, aber es ist nunmal so. Ist nicht auf meinen Mist gewachsen...), weshalb ich das gut so machen kann. Jetzt hab ich das Problem, dass ich per for-Schleife über die Elemente mit dem bestimmten Klassennamen iterieren muss. Geht auch gut mit document.getElementsById('...'). Allerdings nur im FF.

Woran liegt das, dass der IE das nicht will und wie kann ich es erreichen, dass der IE das gewüschte macht?

[JürgenB]

Hallo Fragipani,

... Jetzt hab ich das Problem, dass ich per for-Schleife über die Elemente mit dem bestimmten Klassennamen iterieren muss. Geht auch gut mit document.getElementsById('...'). Allerdings nur im FF.

was machst du genau? getElementsById gibt es nicht, nur getElementById (ohne s). Id's müssen eindeutig sein. Wenn du alle Elemente einer Klasse suchst, musst du per getElementsByTagName("*") alle Elemente abklappern und prüfen, ob sie der Richtigen Klasse angehören. Aus Performancegründen solltest du dich aber auch bestimmte Tags beschränken. Such mal nach getElementsByClass o.Ä.

Gruß, Jürgen

[Fragipani]

was machst du genau? getElementsById gibt es nicht, nur getElementById (ohne s).

Ja, das war auch ein Schreibfehler. Blöd, dass mir das passiert ist...
Im Code steht natürlich document.getElementsbyClassName. Tut mir Leid, war wohl zu flüchtig geschrieben.

Habs jetzt jedenfalls hinbekommen indem ich mit getElementsByTagName('...') mir die passenden Elemente in ein Array schreib und die einzelnen Werte dann per array[i].className auf einen bestimmten Klassennamen überprüfe. Ein bisschen umständlich, aber sonst macht der IE nicht mit...

Danke nochmal für die alle Tipps von euch...

[molily]

ist es möglich die Anzahl der Zeilen zu ermitteln, ohne dass man selbst Umbrüche setzt?

Wüsste gerade nicht, wie.

Anscheinend versuchst du einen Text in einer Box mit einer festen Höhe vertikal zu zentrieren, oder? Das lässt sich ggf. auch auf anderem Wege erreichen als denn mit zwei verschiedenen line-heights.

Mathias

[Gernot Back]

Hallo Mathias,

Anscheinend versuchst du einen Text in einer Box mit einer festen Höhe vertikal zu zentrieren, oder? Das lässt sich ggf. auch auf anderem Wege erreichen als denn mit zwei verschiedenen line-heights.

Vielleicht kommt es Fragipani auch darauf an, dass nebeneinander floatende Boxen sich bei durch unterschiedlicher Textmenge bedingte unterschiedlicher Höhe nicht verhakeln und unschöne Leerräume hinterlassen.

ist es möglich die Anzahl der Zeilen zu ermitteln, ohne dass man selbst Umbrüche setzt?

Wüsste gerade nicht, wie.

Ich habe den Originalposter so verstanden, als ob die folgende Javascriptlösung etwas für ihn sein könnte. Zum Testen kann man das eingeklammerte Wort ja mal aus dem Quellcode entfernen.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Lineheightadapt</title>  
<meta name="author" content="Gernot Back" />  
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />  
<style type="text/css">  
[code lang=css]#meineTextBox {  
#meineTextBox {  
  font: 12px/2em Arial, sans-serif;  
  height:2.1em;  
  width:8em;  
  overflow:hidden;  
  background-color:pink;  
  padding:0;  
}  
}

</style>
<script type="text/javascript">

//<![CDATA[  
window.onload = function () {  
  with(document.getElementById('meineTextBox')) {  
   style.lineHeight = (scrollHeight > offsetHeight) ? '1em' : '2em';  
  }  
}  
// ]]>

</script>
</head>
<body>
  <p id="meineTextBox">
    Ein (noch) längerer Text.
  </p>
</body>
</html>
[/code]

Gruß Gernot