Text wird nicht im Absatzelement umbrochen

Lesezeit: 3 Minuten

Benutzer-Avatar
Jon Hudson

Ich habe zwei schwebende Divs nebeneinander mit p-Tags darin. Der Text innerhalb der p-Tags wird nicht umgebrochen und überläuft den Container einfach, wie Sie im Text unter den Bildern sehen können:

Beispiel:

Mein HTML sieht so aus:

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

Mein CSS:

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

Hat das schon mal jemand erlebt? Ich habe nicht!! Macht mich verrückt!

Benutzer-Avatar
QUentin

Der Zeilenumbruch erfolgt nur, wenn ein Wortumbruch vorhanden ist.

Wenn Sie ein “Wort” haben, das so lang ist, dann gibt es keinen Platz, an dem es brechen kann.

Die richtige Lösung besteht darin, echte Inhalte zu schreiben und keine unsinnigen Zeichenfolgen. Wenn Sie benutzergenerierte Inhalte verwenden, fügen Sie eine Überprüfung auf außergewöhnlich lange Wörter hinzu und verbieten Sie sie (oder schneiden Sie einen Teil davon für URLs heraus, während Sie das Ganze in einem Link belassen).

Alternativ können Sie die verwenden word-break CSS-Eigenschaft um dem Browser mitzuteilen, dass er mitten in Wörtern umbrechen soll.

p { word-break: break-all }

(Notiz Browserunterstützung).

Alternativ können Sie verwenden overflow um den Text abzuschneiden, wenn er nicht in den Container passt.

  • Vielen Dank! Ich habe Mühe herauszufinden, was den Inhaltsüberlauf auf meiner Website verursacht. Es ist in der Tat mit Wortumbruch verwandt!

    – Code_Wie_ein_Neuling

    16. März um 23:37 Uhr

Benutzer-Avatar
matthewsheets

An alle, die noch kämpfenüberprüfen Sie unbedingt, ob Sie für die betreffende Schriftart einen Wert für die Zeilenhöhe festgelegt haben: Er könnte den Zeilenumbruch überschreiben.

  • Vielen Dank, dass Sie mir geholfen haben, dieses Problem einzugrenzen! Ich konnte überhaupt keinen absolut positionierten Absatz zum Umbrechen bekommen, bis ich Ihre Antwort sah. Tatsächlich war die Schriftzeilenhöhe für ein übergeordnetes Element festgelegt worden und stand jedem anderen Versuch im Wege, den Zeilenumbruch zu beeinflussen.

    – Dan Ward

    17. Februar 2016 um 21:40 Uhr


Benutzer-Avatar
Hammad Khan

Die Lösungen sind in der Tat

p{
    white-space:normal;
}

Sie können das Umbruchverhalten ändern, indem Sie die Wortumbrucheigenschaft ändern

p{
    word-break: break-all; // will break at end of line 
}

Break-all: Reißt die Saite ganz am Ende, bricht beim letzten Wort. Punkt normal: dasselbe wie Wortumbruch

  • Vielen Dank, dass Sie mir geholfen haben, dieses Problem einzugrenzen! Ich konnte überhaupt keinen absolut positionierten Absatz zum Umbrechen bekommen, bis ich Ihre Antwort sah. Tatsächlich war die Schriftzeilenhöhe für ein übergeordnetes Element festgelegt worden und stand jedem anderen Versuch im Wege, den Zeilenumbruch zu beeinflussen.

    – Dan Ward

    17. Februar 2016 um 21:40 Uhr


Benutzer-Avatar
Kevin Onk

Sie können den Zeilenumbruch verwenden, um Wörter oder eine fortlaufende Zeichenfolge umzubrechen, wenn sie nicht in eine Zeile in einem Container passt.

word-wrap: break-word;

Dadurch werden Zeilen an geeigneten Unterbrechungspunkten unterbrochen, es sei denn, eine einzelne Zeichenkette passt nicht in eine Zeile. In diesem Fall wird sie unterbrochen.

JSFiddle

1005880cookie-checkText wird nicht im Absatzelement umbrochen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy