Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS - Text bricht um

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - Text bricht um

    Hallo,

    heute muss ich mal wieder eure Hilfe in Anspruch nehmen, ich hoffe ihr könnt mir helfen.

    Folgender Code soll visuelle Unterstützung geben:
    Code:
    <html lang="de">
    
        <head>
    
            <title>Test</title>
    
            <style>
            body {
                margin: 2rem;
            }
            main {
                background-color:    rgb(230, 230, 230);
                height:                100%;
                overflow:            auto;
            }
            td {
                border:    1px solid rgb(255, 0, 0);
            }
            </style>
    
        </head>
    
        <body>
    
            <main>
                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
                <table>
                    <tr>
                        <td style="min-width: 420px;">-10 -9 -8 -7 -6 -5 -4 -3 -2 -1 +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +10</td>
                    </tr>
                </table>
            </main>
    
        </body>
    
    </html>
    1.PNG


    2.PNG

    Wenn ihr jetzt die Breite des Browserfensters reduziert (unter 420px, also kleiner als die Tabelle breit ist), wird durch die CSS-Angabe: overflow: auto; die Scrollbar für den Main-Bereich angezeigt, da der Inhalt ja größer ist, als die Breite des Browserfensters.
    Das Ende der Tabelle ist aktuell also nicht zu sehen.

    Wenn man jetzt nach rechts scrollt, wird das Ende der Tabelle wieder sichtbar.

    Problem:
    Der Text außerhalb der Tabelle bleibt stehen, dadurch bleibt rechts neben dem Text ein freier Platz.
    Der Text breitet sich also nicht im zur verfügungstehenden Bereich (Main) aus, sondern verbleibt im ursprünglichen Bereich stehen, bevor gescrollt wurde.

    Ich habe es auch mit: white-space und text-overflow probiert, aber das bringt mich leider auch nicht an das gewünschte Ziel.

    Ich hoffe ich habe es nicht zu kompliziert erklärt.
    Man friert nur, wenn man glaubt, einem sei kalt


  • #2
    Wenn ich es richtig verstanden habe:

    hole bei main overflow raus

    setze table display block und overflow auto....

    Kommentar

    Lädt...
    X