Zeilenumbruch mitten im Wort vermeiden

    Hallo nochmal!


    Ich habe jetzt nur noch ein Problem, welches mich auf der HP wirklich stört. :)


    http://www.kirche-dw.de

    Joomla3.9.23

    PHP7.4 (das aktuellste auf jeden Fall)


    Auf der Startseite werden die Wörter mitten im Wort umgebrochen. Das habe ich sonst nirgends. Ich hatte mit dem Programmierer der Losung geschrieben. Er meint, dass das Problem mit dem Template zusammenhängen müsse. Denn es tritt nur dann auf, wenn das Fenster für die Schrift zu klein würde. Und in der Tat, in der mobilen Version hat man quasi immer Zeilenumbrüche mitten im Wort. Hier ein Beispiel.

    Zitat

    Das hat aber mit dem PHP-Script und mit dem Losungstext nichts zu tun. Das Script fügt ja nur den Losungstext an der entsprechenden Stelle ein - ohne jegliche Formatierungsangaben.

    Wenn ich statt des Losungstextes anderen Text an der Stelle einfüge, dann tritt das Problem ebenfalls auf:


    Vielleicht kennt ihr die Lösung dafür? Ich habe es übrigens auch nicht hinbekommen, das Design wie bei den Modulen aussehen zu lassen. Der Rahmen ist hier viel kräftiger und nicht schattiert. Meine Änderungen liefen alle ins Leere.


    Ich danke euch ganz herzlich! Bisher habt ihr mir super geholfen. beer

    cnp

    Das liegt daran, dass die Texte vom einem PRE-Tag umgeben sind. Dafür ist der PRE eigentlich ja auch nicht gedacht.


    <pre> ist in der template.css so formatiert:

    Code
    pre {
    ... anderes, unerhebliches ...

    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
}

    Geeigneter wäre statt <pre> wohl ein

    Code
    <div class="well">
.... Hier der Text ...
</div>

    drumrum.

    Na ja, wenn das PRE drumrum schon aus deiner eingebundenen Datei kommt, ist das natürlich blöd von der Datei ;)


    Dann füge in deine user.css am Ende das ein:

    CSS
    .well.resetPre pre
{
word-break: normal !important;
word-wrap: normal !important;
white-space: normal !important;
box-shadow: none !important;
border: none !important;
font-size: 1rem !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

    Und bei deinem Sourcerer-Dingens verwendest:

    Code
    {source}
<div class="well resetPre">
<?PHP include("losungphp1.inc"); ?>
</div>
{/source}

    Vielleicht muss man am CSS noch das eine oder andere nacharbeiten.

    Zitat von anka

    Man kann natürlich auch die Zehen abhacken, statt die Schuhe eine Nummer grösser zu kaufen ;)

    rofl Ich liebe diesen Humor!


    Code
    <div class="well" style="text-align: left;"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span class="important">{source}</span> <b>&lt;?PHP </b><b>include(</b>"losungphp1.inc"<b>); </b><b>?&gt;</b> <span class="important">{/source}</span></span></div>
<!--?PHP include("losungphp1.inc"); ?--><div class="well" style="text-align: left;"><span style="font-family: tahoma, arial, helvetica, sans-serif;"><span class="important">{source}</span> <b>&lt;?PHP </b><b>include(</b>"losungphp1.inc"<b>); </b><b>?&gt;</b> <span class="important">{/source}</span></span></div>
<!--?PHP include("losungphp1.inc"); ?-->

    Macht denn das jetzt Sinn? Ich habe einfach nur pre durch div ersetzt und die Klasse ganz vorne angepasst.


    Ehrlich gesagt, würde ich die Design-Sachen alle komplett rausnehmen wollen. Dafür ist doch das Template da oder?

    Natürlich kannst du dir die ganzen Design-Sachen sparen :)


    Wenn du den Sourcerer installiert hast, dann siehst du jetzt beim Editor ein neues Icon:



    Nachdem du das Icon angeklickt hast, geht ein neues Fenster auf. Dort gibst du nur das hier ein (Bild losung_02.jpg, Pkt. 1)


    Code
    {source}
<div class="well">
<?PHP include("losungphp1.inc"); ?>
</div>
{/source}


    Wenn du keinen grauen Hintergrund mit einem Rahmen drum herum haben willst, dann gibst du diesen Code ein :

    Code
    {source}
<?PHP include("losungphp1.inc"); ?>
{/source}


    Anschliessend bestätigst du die Eingabe mit einem Klick auf "Einfügen" (Bild losung_02.jpg, Pkt. 2).



    Danach sieht es im Frontend etwa so aus:



    Wenn alles klappt, dann brauchst du keine neuen Einträge im CSS (Post #5 und #7).