Zapobiegaj łamaniu linii elementu rozpiętości

242

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

Randomblue
źródło
jeśli chcesz je stłumić, sprawdź stackoverflow.com/questions/425274/…
amwinter 10.01.2013

Odpowiedzi:

408

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.

Daan
źródło
3
Również miło dodać tutaj trochę dokumentacji: w3.org/wiki/CSS/Properties/white-space
Justus Romijn
21
W przypadku, gdy masz wiele rozpiętości wewnątrz div i chcesz osiągnąć rozpiętość jednowierszową, ale nie div div, musisz dodać do rozpiętości również display: inline-block ;. Mam nadzieję, że to komuś pomoże.
walv
16

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

No&nbsp;line&nbsp;break

zamiast

<span style="white-space:nowrap">No line break</span>
Brent Washburne
źródło
1

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 &nbsp;. (Usunięcie białych znaków nie działa).

żałosny
źródło