Automatischen Zeilenumbruch formatieren

[Caroline L]

Hallo zusammen,

ich möchte eine Liste in HTML mit CSS so formatieren, dass wenn das Ende der Zeile erreicht ist und der Browser selbstständig eine neue erstellt, die Zeilenhöhe kleiner ist, als wenn ich einen neuen Listenpunkt anlege.

Leider komme ich auf gar keine Lösung. Habt ihr vielleicht eine Idee?

Mein HTML-Code:

  
<ul>  
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</li>  
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</li>  
        </ul>

Mein CSS:

  
ul{  
 list-style-image: url(../bilder/listenpunkt.gif);  
 list-style-position:outside;  
 font-size: 12px;  
 line-height: 18px;  
}  
  
ul li{  
 line-height: 30px;  
}  

[ChrisB]

Hi,

ich möchte eine Liste in HTML mit CSS so formatieren, dass wenn das Ende der Zeile erreicht ist und der Browser selbstständig eine neue erstellt, die Zeilenhöhe kleiner ist, als wenn ich einen neuen Listenpunkt anlege.

Du moechtest also die Zeilenhoehe fuer den Inhalt innerhalb der LI vorgeben, und ausserdem die Abstaende der LI zueinander - dann mach das.

MfG ChrisB

[Caroline L]

Du moechtest also die Zeilenhoehe fuer den Inhalt innerhalb der LI vorgeben, und ausserdem die Abstaende der LI zueinander - dann mach das.

MfG ChrisB

Haste mir auch nen Tipp wie ich das anstellen soll?
Das andere funktioniert nicht so recht.

[ChrisB]

Hi,

Du moechtest also die Zeilenhoehe fuer den Inhalt innerhalb der LI vorgeben, und ausserdem die Abstaende der LI zueinander - dann mach das.

Haste mir auch nen Tipp wie ich das anstellen soll?

Na selbstverstaendlich mit den CSS-Eigenschaften, die dafuer vorgesehen sind.
Zeilenhoehe ueber line-height, Aussenabstaende der LI ueber margin.

MfG ChrisB

[Tim Tepaße]

Hallo,

ich möchte eine Liste in HTML mit CSS so formatieren, dass wenn das Ende der Zeile erreicht ist und der Browser selbstständig eine neue erstellt, die Zeilenhöhe kleiner ist, als wenn ich einen neuen Listenpunkt anlege.

Die Pseudoklasse ::first-line selektiert die erste Zeile von Elementen:

~~~css li {
      line-height:1.2em; /* Kleine Zeilenhöhe als Default für alle Zeilen in li-Elementen */
  }

li::first-line {
      line-height:1.8em /* Überschrieben durch eine größere Zeilenhöhe */
  }

  
Für andere Zeilen als die erste gibt es jedoch keine Selektionsmöglichkeiten.  
  
  
Tim