Wie kann ich Zeilenumbrüche in einem Inline-Element vermeiden?

Baue ich ein Menü mit horizontalen wichtigsten Einträge. Jeweils unterhalb der entsprechenden Untermenü-Titel sind, die untereinander angezeigt werden. Nun, einige mehr Menü-Titel eingewickelt, die über mehrere Zeilen. Tatsächlich, der "sub" UL ist genauso breit wie der längste einzelne Wort in ein Untermenü und alle anderen sind verpackt entsprechend. Ich habe keine Breite für das UL noch die LI (weder Haupt-noch sub-Menü).

Also meine Frage ist, wie kann ich vermeiden, brechen Linien? Wahrscheinlich könnte ich ersetzen Sie jedes Leerzeichen mit   (kein Leerzeichen), aber gibt es einen anderen Weg dies zu erreichen?

InformationsquelleAutor der Frage Martin | 2009-09-15

  1. 42

    Haben Sie versucht, das styling der li mit

    white-space: nowrap

    ?

    InformationsquelleAutor der Antwort Eifion

  2. 16

    hinzufügen des folgenden CSS wird verhindert, dass die Zeile zu brechen:

    li {
   white-space: nowrap;
}

    InformationsquelleAutor der Antwort Wayne Austin

  3. 3

    Weiter zu M K s Antwort, die bootstrap-utility-Klasse text-nowrap gilt white-space: nowrap um ihn herum, die bedeutet, dass jeder text innerhalb dieser Klasse wird nicht brechen in eine neue Zeile. Dies kann nützlich sein, kann aber auch schmerzhaft sein, wenn die Gestaltung responsiver code.

    Wenn Sie ein Stück text, den Sie möchten, um nicht zu brechen, ist es am besten Praxis, um wickeln Sie es um, anstatt das übergeordnete element:

    <div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio
        <span class="text-nowrap">lobortis,</span>
        condimentum ipsum in, vulputate felis. 
    </p>
</div>

    InformationsquelleAutor der Antwort Tom Harris

  4. 1

    Es ist ein Dienstprogramm, css-Klasse text-nowrap. Sie können es finden in der utility Abschnitt der docs.

    <div style="width: 10px">
    <span class="text-nowrap">This line will not break, ever....!!!</span>
</div>

    InformationsquelleAutor der Antwort M K

Schreibe einen Kommentar