wp_tag_cloud Längere Stichwörter werden in Firefox abgeschnitten!

andreas11

Hallo, habe ein Problem mit wp_tag_cloud:

Längere Tags/Stichwörter werden in Firefox abgeschnitten und ragen rechts über die Sidebar hinaus anstatt getrennt zu werden und in der nächsten Zeile fortgeführt zu werden, wie der Internetexplorer es richtigerweise macht

Ich habe jetzt die maximale Schriftgräße auf 13 gestellt, damit mein längstes Stichwort in Firefox in die Sidebar-Spalte passt. Aber das ist auf Dauer zu klein.

Hier im Forum stand zwar, dass man die CSS-Datei anpassen muss, aber das hat bei mir nicht funktioniert. Wie geht das ganz genau?

Wer hatte ein ähnliches Problem und es gelöst?

Danke!

andreas11

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

Ammaletu

Zitat

Längere Tags/Stichwörter werden in Firefox abgeschnitten und ragen rechts über die Sidebar hinaus

Beides gleichzeitig?! Normalerweise kannst Du im Stylesheet einstellen, ob zu langer Content abgeschnitten werden soll oder über die Box hinaus ragen soll. Eine Scrollbar einzublenden, geht auch, sähe in diesem Kontext aber eher nicht gut aus.

Zitat

anstatt getrennt zu werden und in der nächsten Zeile fortgeführt zu werden, wie der Internetexplorer es richtigerweise macht

Das Problem mit der Silbentrennung ist nicht halb so einfach wie es auf den ersten Blick aussieht und Browser haben nun mal nicht die Möglichkeiten, die eine Textverarbeitung mitbringt. Da hier meines Wissens nach nichts standardisiert ist, kann man eigentlich nicht sagen, dass der IE es richtig macht und der FF falsch. Der IE macht es einfach anders als der FF, was den Umgang mit Bindestrichen angeht -- und ich nehme mal an, dass es Dir darum geht. Mehr Infos zu dem Thema, falls es Dich interessiert:
Stichpunkt: Silbentrennung und Zeilenumbruch im HTML

Was jetzt Dein konkretes Problem betrifft: Ich würde an Deiner Stelle die Box, in der die Tag-Cloud steht, nicht zu schmal machen und für den Fall zu großen Contents etwas im Stylesheet definieren. Verhindern kannst Du diesen Fall ja sowieso nicht wirklich: Jeder Nutzer kann die Schriftgröße der Seite vergrößern, wenn er möchte, und irgendwann ist die Box automatisch nicht mehr groß genug, es sei denn, sie wächst mit. Bei meiner Seite habe ich es so definiert, dass die Tags dann abgeschnitten werden, aber da muss die Schriftgröße schon ziemlich groß werden dafür.

andreas11

Hallo Ammaletu,

danke.

Zitat:
Längere Tags/Stichwörter werden in Firefox abgeschnitten und ragen rechts über die Sidebar hinaus
Beides gleichzeitig?! Nein, es ragt rechts hinaus.

Zitat:
anstatt getrennt zu werden und in der nächsten Zeile fortgeführt zu werden, wie der Internetexplorer es richtigerweise macht
Da hier meines Wissens nach nichts standardisiert ist, kann man eigentlich nicht sagen, dass der IE es richtig macht und der FF falsch. Der IE macht es einfach anders als der FF, was den Umgang mit Bindestrichen angeht -- und ich nehme mal an, dass es Dir darum geht.

Genau es geht um den Bindestrich: Der IE bricht um, Firefox nicht.

Stichpunkt: Silbentrennung und Zeilenumbruch im HTML: Das habe ich durchprobiert, die Befehle wie

Code

&shy;<wbr />

PHP

&shy;

werden allerdings in Tags nicht akzeptiert.

Was jetzt Dein konkretes Problem betrifft: Ich würde an Deiner Stelle die Box, in der die Tag-Cloud steht, nicht zu schmal machen und für den Fall zu großen Contents etwas im Stylesheet definieren.

Die Box ist eh breit genug, etwas Platz muss ja auch für den Inhalt bleiben. Was kann ich im Fall von zu großem Content im Style definieren? An welcher Stelle? Mir geht es lediglich um den Bindestrich in einem einzigen zu langen Tag, der getrennt werden soll, wenn die Box nicht breit genug ist der oder von mir aus auch standardmäßig immer getrennt werden soll.

Danke andreas11

Monika

ich habe keine Ahnung welches Design Du nutzt noch kann ich es mir ansehen, da du keinen Link gepostet hast,

ich löse sowas mit *overflow:hidden*

gut da wird dann das zulange Wort einfach abgeschnitten, aber es zerstört kein Design

lg

andreas11

Hallo Monika,

Das Theme heißt SimpsonsHB 2.0 by Angelina.
Wo genau müsste ich denn das *overflow:hidden* in welcherm Code einbetten?

Danke andreas11

Ammaletu

Die Tag-Cloud wird in einer Box angezeigt, einem div, Listenpunkt etc. Der wird sicher eine Klasse zugewiesen bekommen haben, einfach mal im Stylesheet nachschauen und bei der entsprechenden Definition "overflow: hidden;" ergänzen. Genauer lässt es sich ohne Link zur Seite nicht sagen.

andreas11

Hallo Ammaletu,

danke, aber ich habe viele Stellen ausprobiert und es half nichts. Wo genau muss ich

PHP

overflow: hidden;

ergänzen? Danke!

Sidebar:

PHP

<li class="side-back"><h2><?php _e('Stichwörter'); ?></h2><div align="center">
    <?php wp_tag_cloud('smallest=9&largest=25&unit=px'); ?></div>
  </li>

CSS:

PHP

/* ------------------------------------- Sidebar --------------------------------------- */
.sidebar, .rightcolumn{
 float: left;
 width: 170px;
 margin: 0 10px 0 0;
}
.rightcolumn{
 width: 170px;
 margin: 0;
}
.sidebar ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 background-image: none;
}
.sidebar ul a{
 color: #339966;
}
.sidebar ul a:hover{
 color: #ff0000;
}
li.side-back {
 border: 4px solid #000000;
 margin: 0 0 10px 0;
 background-color: #FFFFFF;
}
li.side-back ul li {
 background-color: #FFFFFF;
}
li.side-back ul {
 background-color: #FFFFFF;
}
.sidebar ul li#search{
 padding: 10px;
 background-color: #FFFFFF;
}
.sidebar ul li#search input{
 margin: 0 0 5px;
}
.sidebar h2{
 padding: 5px 10px;
 font-size: 14px;
 font-weight: bold;
 color: #ff0000;
 background-color: #FFFFFF;
}
.sidebar ul ul{
 padding: 5px 10px 10px;
}
.sidebar ul ul li{
 border: 0;
 margin: 0;
 padding: 0;
 line-height: 18px;
}
.sidebar ul ul ul{
 padding: 0;
}
.sidebar ul ul ul li{
 padding: 0 0 0 10px;
}

Alles anzeigen

Ammaletu

Also ich würde mal sagen, es ist diese Stelle hier:

Code

[COLOR=Black][COLOR=#000000][COLOR=#0000cc]li[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000cc]side[/COLOR][COLOR=#006600]-[/COLOR][COLOR=#0000cc]back [/COLOR][COLOR=#006600]{
 [/COLOR][COLOR=#0000cc] border[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#0000cc]4px solid [/COLOR][COLOR=#ff9900]#000000;
  [/COLOR][COLOR=#0000cc]margin[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#0000cc]0 0 10px 0[/COLOR][COLOR=#006600];
  [/COLOR][COLOR=#0000cc]background[/COLOR][COLOR=#006600]-[/COLOR][COLOR=#0000cc]color[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#FFFFFF;
  overflow: hidden;
[/COLOR][COLOR=#006600]}[/COLOR][/COLOR][/COLOR]

P.S.: Wenn es nicht geht die Seite mal mit Strg+F5 neuladen, nicht dass eine ältere Version des Stylesheets noch im Cache liegt.

andreas11

Hallo Ammaletu,

nein, das funktioniert leider nicht. Der Firefox schneidet das Wort einen Buchstaben nach dem Bindestrich ab und bringt in der nächsten Zeile leider keine Fortsetzung.

andreas11

Monika

Zitat von andreas11

Hallo Ammaletu,

nein, das funktioniert leider nicht. Der Firefox schneidet das Wort einen Buchstaben nach dem Bindestrich ab und bringt in der nächsten Zeile leider keine Fortsetzung.

andreas11

ja der tut was er tun soll...overflow hidden ;)

hidden bedeutet ja verstecken,

du wirst dem Firefox nichts anders beibringen, entweder gehts über das Design hinaus oder das Wort bricht ab,

lg

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wp_tag_cloud Längere Stichwörter werden in Firefox abgeschnitten!

Jetzt mitmachen!