Text an der Seite abgeschnitten

Soobo

Hallo zusammen!

In meinem Blog wird auf der rechten Seite, in der Sidebar, die Schrift automatisch abgeschnitten, wenn diese zu lang sein sollte.

Meine Frage ist deshalb, kann man irgendwo in der CSS Datei einstellen, dass anstatt dessen einfach ein Umbruch statt findet?

Wisst ihr da auf Anhieb etwas oder soll ich den CSS Code kopieren?
Habe auch schon im Forum gesucht aber nichts brauchbares gefunden und Google findet nur Textumbrüche für Texte, aber es soll ja automatisch passieren wenn die Zeile zu lang wird.

Falls ihr euch ein Bild davon machen wollt, der Blog: http://www.snarkcafe.de

Gruß

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

funkygog

Hallo,

Du hast in den style.css Angaben im Sidebar Bereich folgendes stehen:
overflow:hidden;

das bewirkt, wie der Name schon vermuten lässt, dass Bereiche die einen Container überragen nicht angezeigt werden. Es also abgeschnitten aussieht.
Der Container der Sidebar ist nämlich kleiner als der Platz der für die ul li Liste angegeben wurde.

Soobo

Alles klar, gibt es denn dafür dann den Befehl, dass ein Zeilenumbruch stattfindet und es in der nächsten Zeile weitergeht, wenn er den Max. Wert erreicht hat?

alchymyth

zusatzinfo:

Code

.sidebar ul li ul li
{
 margin:0 0 0px 10px;
width:210px;
 padding: 5px 0 5px 13px;
 background: url(images/bullet.gif) left top no-repeat;
}

dieser style formatiert den 'abgeschnittenen' text; die zusaetzliche 'width:210px;' definiert den zur verfuegung stehenden platz, und bringt zu lange texte zum zeilenumbruch.

Soobo

Ahhh super, werde es gleich mal ausprobieren, Danke!

Soobo

Zitat von alchymyth
zusatzinfo:
Code
.sidebar ul li ul li
{
 margin:0 0 0px 10px;
width:210px;
 padding: 5px 0 5px 13px;
 background: url(images/bullet.gif) left top no-repeat;
}
dieser style formatiert den 'abgeschnittenen' text; die zusaetzliche 'width:210px;' definiert den zur verfuegung stehenden platz, und bringt zu lange texte zum zeilenumbruch.

Habe width:210px; nun ebenfalls dort stehen, der Rest ist ebenfalls gleich, eine Änderung hat sich nur leider nicht bemerkbar gemacht.

Vielleicht sonst eine Idee?

alchymyth

hier sieht alles gut aus.
manchmal (eigentlich fast immer) haelt der browser an alten styles fest; das soll ladezeiten sparen.
versuch mal die seite im browser neu zu laden (mit dem button oben am browser); das sollte die alten styles aus dem browser-cache entfernen.
oder versuch mit 'ctrl f5' das selbe zu erreichen.

Tutrix

entferne mal aus diesem Teil

Code

.sidebar ul li, .sidebar ul, .sidebar ul li ul {
display:block;




}


.sidebar  ul li {
background:url("images/sidebar_body.gif")  repeat scroll left top transparent;
border:1px dashed #99936F;
margin:0 0 10px;
overflow:hidden;
width:268px;




}


.sidebar ul li h2 {
background:url("images/sidebar_h2.gif") repeat-x  scroll left top transparent;
color:#C7D1DB;
font:bold 24px/33px "Trebuchet  MS",Helvetica,sans-serif;
height:33px;
margin:11px 0 20px;
padding:0 0 0 18px;
text-transform:uppercase;
width:268px;




}


.sidebar ul li ul {
margin:0 0 10px;
padding:0;
width:232px;




}


.sidebar  ul li ul li {
background:url("images/bullet.gif")  no-repeat scroll left top transparent;
margin:0 0 0 10px;
padding:5px 0 5px 13px;
width:210px;




}

Alles anzeigen

alle width Definitionen, also 2mal "width:268px;" 1mal "width:232px;" und 1mal "width:210px;"

Soobo

Zitat von alchymyth

hier sieht alles gut aus.
manchmal (eigentlich fast immer) haelt der browser an alten styles fest; das soll ladezeiten sparen.
versuch mal die seite im browser neu zu laden (mit dem button oben am browser); das sollte die alten styles aus dem browser-cache entfernen.
oder versuch mit 'ctrl f5' das selbe zu erreichen.

Stimmt! Du hattest recht. :)
Hatte direkt nach dem ändern mal die Seite neu geladen, da war es noch unverändert. Jetzt stimmt es! Vielen Dank! :)

Zitat von Art of Pic

entferne mal aus diesem Teil
[CODE].sidebar ul li, .sidebar ul, .sidebar ul li ul {
display:block;

}
.sidebar ul li {
background:url("images/sidebar_body.gif") repeat scroll left top transparent;
border:1px dashed #99936F;
margin:0 0 10px;
overflow:hidden;
width:268px;
....

Alles anzeigen

Danke auch für deine Hilfe Art of Pic, habe es jetzt gar nicht mehr getestet, da die Lösung von alchymyth jetzt doch funktioniert!
Aber Danke auch für deine Mühe! :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Text an der Seite abgeschnitten

Jetzt mitmachen!