Zeilenumbruch nach "Komma" mit CSS verwirklichen....

[Freiheitenwelt]

Hallo miteinander,

ich habe auf meiner Homepage eine Veranstaltungsliste und möchte z.B. bei diesem Text ...



... nach dem Komma den Ort + PLZ in die nächste Zeile schreiben. Kann man sowas auch mit CSS umsetzen? Also nach "," -> Aktion...



... richtig toll wäre auch wenn man nach der Location einen Sprung macht und das "-" rausgeschmissen wird.

Da jene Informationen öfter auf der HP benutzt werden muss ich das für die Liste extra irgendwie ändern...


GLG

Martin

 

[Gelöschtes Mitglied 633957]

Kann man sowas auch mit CSS umsetzen?

auch wenn man nach der Location einen Sprung macht und das "-" rausgeschmissen wird

CSS ist für das Styling zuständig. Das ist client-seitig eher ein Job für JS.
Hier wäre eine Möglichkeit das zu realisieren, was sich auch auf die Bindestriche erweitern ließe.

 

[dn3d_fanboy]

Wenn das der Titel des Beitrags ist, kannst du dort mit <br> an gewünschter Stelle einen Zeilenumbruch erzwingen.

 

[AliceG]

hmmm ...,
wie schon @tynick erwähnt hat, reines CSS wird nicht reichen.
Allerdings wäre ich hier mit eine JavaScript basierten Lösung vorsichtig, denn dies u.U. viel Ressourcen fressen könnte und auch zu unschönen sprunghaften Aufbau der Seite führen könnte.

Ich vermute die bekommst die Daten aus einer Datenbank oder einer JSON Datei. Kannst du da nicht ansetzten und schon beim generieren des Outputs die relevanten Blöcke wie Location, Strasse und Ort in separaten span Tags ausgeben?
Auf diese weise hättest du aller möglichen Vorzüge des CSS Stylings ausschöpfen können.

 

[Curanai]

Wäre auch für eine serverbasierte Lösung:

str_replace(array(" - ", ", "), array("\t", ",<br>"), "KURHAUS \"Abenteuer Reisen\" - Kurhausstraße 1, 79189 Bad Krozingen");

Unicode, mb4 usw. dürften keine Probleme bereiten (da nicht angefasst).

Und da wir ja in der deutschen Sprache unterwegs sind: Anführungszeichen in deutsch (denn "Abenteuer Reisen" ist falsch). ^^

 

[anja_mts]

Wenn du das mit css umsetzen möchtest, dann müsste der Text besser strukturiert werden. Wie wäre es z.Bsp. mit einer Definitionsliste:

HTML:
<dt></dt>
<dd><dd>
<dd><dd>


Jetzt kannst du auf die einzelnen tags der Liste Einfluss nehmen und mit css Umbrüche oder Kommas einfügen:

CSS:
dt, dd {
display: inline;
}

dt::after {
content: "\A";
}

Siehe auch (Lea Verou): http://dabblet.com/gist/7eb242f4e8f078cadbca

 

[Myhar]

@anja_mts Wenn du schon eine definitionsliste verwendest, wieso dann mit diesem Aufbau? Da würde es doch heißen, dass die Definition von Kurhaus " ... " die folgende ist: Kurhausstraße und "489789 Bad ASDF". Da wäre doch <dt> Adresse </dt> sprechender? Oder bin ich hier auf dem Holzweg.

 

[anja_mts]

@Myhar
Nein, nicht auf dem Holzweg, ich wollte nur eine Möglichkeit zeigen. Man kann ja auch <span> oder <div> s nehmen, wenn man sich damit besser fühlt oder gleich einen Link zu google maps setzen und die Adresse nicht anzeigen.

 

[dn3d_fanboy]

Bei der Website handelt es sich um eine WordPress-Seite.
Der Linktext ist der Titel des Beitrags. Und dieser Text wird in der Regel als Raw HTML eingefügt. So ist es möglich, im Titel des Posts auch HTML-Tags zu verwenden.

In der Templatedatei wird es wahrscheinlich so aussehen:

<div class="event_list_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>