Zapobiegaj łamaniu linii elementu rozpiętości

Mam <span>element, który chcę wyświetlić bez żadnego łamania linii. Jak mogę to zrobić?

Umieść to w swoim CSS:

white-space:nowrap;

Uzyskaj więcej informacji tutaj: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceNieruchomość deklaruje jak biała przestrzeń wewnątrz elementu jest obsługiwany.

Wartości

normal Ta wartość kieruje programy klienckie do zwijania sekwencji białych znaków i przerywania linii w razie potrzeby w celu wypełnienia pól linii.

pre Ta wartość zapobiega zwijaniu przez użytkownika sekwencji białych znaków. Linie są przerywane tylko na nowych liniach w źródle lub w wystąpieniach „\ A” w generowanej treści.

nowrap Ta wartość zwija białe znaki jak dla „normalnego”, ale pomija łamanie linii w tekście.

pre-wrap Ta wartość zapobiega zwijaniu przez użytkownika sekwencji białych znaków. Linie są przerywane na nowych liniach w źródle, w wystąpieniach „\ A” w generowanej treści i, w razie potrzeby, w celu wypełnienia pól linii.

pre-line Ta wartość kieruje programy klienckie do zwijania sekwencji białych znaków. Linie są przerywane na nowych liniach w źródle, w wystąpieniach „\ A” w generowanej treści i, w razie potrzeby, w celu wypełnienia pól linii.

inherit Pobiera tę samą określoną wartość, co właściwość elementu nadrzędnego elementu.

Jeśli potrzebujesz tylko zapobiegać łamaniu linii w znakach spacji, możesz używać  encji między słowami:

No line break

zamiast

<span style="white-space:nowrap">No line break</span>

white-space: nowrapjest poprawnym rozwiązaniem, ale zapobiegnie przerwaniu linii. Jeśli chcesz tylko zapobiec łamaniu linii między dwoma elementami, staje się to nieco bardziej skomplikowane:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Aby zapobiec przerwom między rozpiętościami, ale pozwolić na przerwy między „niektórymi” a „tekstem”, można:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

To wystarczy dla Firefoksa. W Chrome musisz dodatkowo zamienić spację między zakresami na  . (Usunięcie białych znaków nie działa).

Z klasą Bootstrap 4:

text-nowrap

Zobacz: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow